Tipoj de dialogoj
Kirigami.Dialog estas simpla komponanto, kiun vi povas uzi por kompletigi la enhavon montratan sur la paĝo de aplikaĵo. Ĝi povas montri ne-interagan enhavon (nur teksto) kaj interagan enhavon (formoj, listvidoj kaj butonoj).
Ili povas esti forigitaj klakante aŭ frapetante ekster sia areo aŭ klakante la fermbutonon sur la kaplinio.
Dialogo
Norma Kirigami.Dialog estas uzata por krei proprajn dialogojn. Ili estas tre facile etendeblaj:
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"
}
}
}
}
Kiel montrite en la enkonduka lernilo pri dialogoj, estas ankaŭ eble kapti standardButton(button) por atribui iun konduton al ĝi, kiel ligado por ebligi ĝi nur sub certaj kondiĉoj.
Ĉi tiu speco de dialogo estas ĝenerala kaj validas por plej multaj uzkazoj, kaj ĝi funkcias bone kun kompleksa interaga enhavo (precipe vidoj):
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
// sugestoj por la dialogaj dimensioj
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
}
}
}
}
}
Plejofte vi tamen verŝajne volos uzi unu el ĝiaj derivitaj dialogtipoj, Kirigami.PromptDialog aŭ Kirigami.MenuDialog.
PromptDialog
Kirigami.PromptDialog estas esence dialogo kun enkonstruita etikedo kaj defaŭlta contentPadding kiu estas uzata por peti la uzanton por iuj informoj. Ĉi tiu tipo de dialogo supozeble estas uzata nur por simplaj jes/neaj invitoj aŭ mallongaj petoj por uzanta enigo.
Ĝia ĉefa propreco estas Kirigami.Dialog.subtitle, al kiu vi aldonus tekston. Se iu QML-komponento estas aldonita kiel infano de la prompta dialogo, tiu komponanto anstataŭe anstataŭos la subtitolon, kaj ĉi tio povas esti eksplicite specifita per Kirigami.Dialog.mainItem.
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…"
}
}
}
}
}
MenuDialogo
La Kirigami.MenuDialogo estas faka dialogo, kiu estas uzata por listigi elekton de klakeblaj opcioj por la uzanto uzante ĝian actions proprecon.
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")
}
]
}
}
}