Tipi di finestra
Un Kirigami.Dialog è un semplice componente che puoi utilizzare per integrare il contenuto visualizzato sulla pagina di un'applicazione. Può visualizzare contenuto non interattivo (solo testo) e contenuto interattivo (moduli, visualizzazioni elenco e pulsanti).
Possono essere chiusi facendo clic o toccando all'esterno della loro area o facendo clic sul pulsante di chiusura nell'intestazione.
Ambienti sandbox
Funziona immediatamente per tutte le finestre di dialogo Kirigami in ambienti sandbox (come Flatpak) tramite i portali desktop XDG. Quando si esegue in una sandbox, il backend del portale appropriato viene utilizzato automaticamente, consentendo l'accesso approvato dall'utente senza richiedere la gestione manuale del D-Bus.Finestra
Un Kirigami.Dialog standard viene utilizzato per creare finestre di dialogo personalizzate. Sono molto facili da estendere:
import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
title: "Dialog"
width: 400
height: 400
pageStack.initialPage: Kirigami.Page {
id: page
actions: Kirigami.Action {
icon.name: "list-add"
text: "Show dialog"
onTriggered: dialog.open()
}
Kirigami.Dialog {
id: dialog
title: "A simple dialog"
padding: Kirigami.Units.largeSpacing
showCloseButton: false
standardButtons: Kirigami.Dialog.NoButton
flatFooterButtons: false
Controls.Label {
text: "A generic, easy to make dialog!"
}
customFooterActions: Kirigami.Action {
text: "Copy"
icon.name: "clipboard"
}
}
}
}
Come mostrato nel tutorial introduttivo sulle finestre di dialogo, è anche possibile catturare un standardButton(pulsante) per assegnargli un comportamento, come un'associazione per abilitarlo solo in determinate condizioni.
Questo tipo di dialogo è generico e si applica alla maggior parte dei casi d'uso e funziona bene con contenuti interattivi complessi (in particolare visualizzazioni):
import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
title: "Scrollable Dialog"
width: 600
height: 600
pageStack.initialPage: Kirigami.Page {
id: page
actions: Kirigami.Action {
icon.name: "list-add"
text: scrollableDialog.title
onTriggered: scrollableDialog.open()
}
Kirigami.Dialog {
id: scrollableDialog
title: i18n("Select Number")
ListView {
id: listView
// suggerimenti per le dimensioni della finestra di dialogo
implicitWidth: Kirigami.Units.gridUnit * 16
implicitHeight: Kirigami.Units.gridUnit * 16
model: 20
delegate: Controls.RadioDelegate {
topPadding: Kirigami.Units.smallSpacing * 2
bottomPadding: Kirigami.Units.smallSpacing * 2
implicitWidth: listView.width
text: modelData
}
}
}
}
}
Nella maggior parte dei casi, tuttavia, probabilmente vorrai utilizzare uno dei tipi di dialogo derivati, Kirigami.PromptDialog o Kirigami.MenuDialog.
PromptDialog
Un Kirigami.PromptDialog è essenzialmente una finestra di dialogo con un'etichetta incorporata e un [contentPadding](https://api.kde.org/qml-org-kde-kirigami-dialogs-promptdialog.html#contentPadding-prop predefinito) utilizzata per richiedere all'utente alcune informazioni. Questo tipo di dialogo dovrebbe essere utilizzato solo per semplici richieste sì/no o brevi richieste di input da parte dell'utente.
La sua proprietà principale è Kirigami.Dialog.subtitle, alla quale aggiungeresti del testo. Se un componente QML viene aggiunto come figlio della finestra di dialogo del prompt, quel componente prenderà invece il posto del sottotitolo.
import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
title: "PromptDialog"
width: 400
height: 400
pageStack.initialPage: Kirigami.Page {
id: page
actions: Kirigami.Action {
icon.name: "list-add"
text: promptDialog.title
onTriggered: promptDialog.open()
}
Kirigami.PromptDialog {
id: promptDialog
title: i18n("Delete file")
subtitle: i18n("Are you sure you'd like to delete this file?")
standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
onAccepted: console.info("File deleted")
}
}
}
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
title: "PromptDialog with a textfield"
width: 600
height: 600
pageStack.initialPage: Kirigami.Page {
id: page
actions: Kirigami.Action {
icon.name: "list-add"
text: textPromptDialog.title
onTriggered: textPromptDialog.open()
}
Kirigami.PromptDialog {
id: textPromptDialog
title: "New Folder"
standardButtons: Kirigami.Dialog.NoButton
customFooterActions: [
Kirigami.Action {
text: "Create Folder"
icon.name: "dialog-ok"
onTriggered: {
showPassiveNotification("Created");
textPromptDialog.close();
}
},
Kirigami.Action {
text: "Cancel"
icon.name: "dialog-cancel"
onTriggered: {
textPromptDialog.close();
}
}
]
ColumnLayout {
Controls.TextField {
Layout.fillWidth: true
placeholderText: "Folder name…"
}
}
}
}
}
MenuDialog
Il Kirigami.MenuDialog è una finestra di dialogo specializzata utilizzata per elencare una selezione di opzioni selezionabili dall'utente utilizzando la sua proprietà actions.
import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
title: "MenuDialog"
width: 400
height: 600
pageStack.initialPage: Kirigami.Page {
id: page
actions: Kirigami.Action {
icon.name: "list-add"
text: menuDialog.title
onTriggered: menuDialog.open()
}
Kirigami.MenuDialog {
id: menuDialog
title: i18n("Track options")
showCloseButton: false
actions: [
Kirigami.Action {
icon.name: "media-playback-start"
text: i18n("Play")
tooltip: i18n("Start playback of the selected track")
},
Kirigami.Action {
enabled: false
icon.name: "document-open-folder"
text: i18n("Show in folder")
tooltip: i18n("Show the file for this song in the file manager")
},
Kirigami.Action {
icon.name: "documentinfo"
text: i18n("View details")
tooltip: i18n("Show track metadata")
},
Kirigami.Action {
icon.name: "list-add"
text: i18n("Play next")
tooltip: i18n("Add the track to the queue, right after the current track")
},
Kirigami.Action {
icon.name: "list-add"
text: i18n("Add to queue")
tooltip: i18n("Enqueue current track")
}
]
}
}
}