Типи вікон

Різноманітні способи обслуговувати і вводити дані.

Kirigami.Dialog є простим компонентом, яким ви можете скористатися для надання даних, які буде показано на сторінці програми. Він може показувати неінтерактивні дані (лише текст) та інтерактивні дані (форми, списки з вибором та кнопки).

Їх можна закривати клацанням або торканням поза областю накладки, а також натисканням кнопки закриття на панелі заголовка.

Діалогове вікно

Стандартний Kirigami.Dialog використовують для створення нетипових діалогових вікон. Такі вікна дуже просто розширити:

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"
            }
        }
    }
}

Просте діалогове вікно, у якому міститься лише текст

Як показано у вступній частині підручника щодо діалогових вікон, також можна захопити standardButton(button) для пов'язування з нею певної поведінки, зокрема прив'язкою її вмикання до певних умов.

Цей тип діалогових вікон є загальним і застосовним у більшості випадків. Він добре працює із складним інтерактивним вмістом (особливо, панелями перегляду):

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
                // підказки щодо розмірів діалогового вікна
                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
                }
            }
        }

    }
}

Втім, у більшості випадків вам, ймовірно, варто скористатися одним із похідних типів діалогових вікон, Kirigami.PromptDialog або Kirigami.MenuDialog.

PromptDialog

Kirigami.PromptDialog на базовому рівні є діалоговим вікном із вбудованою міткою та типовим contentPadding, який використовують для надсилання користувачеві запиту щодо певної інформації. Вважається, що цей тип діалогових вікон використовується лише для простих запитів із відповіддю «так» чи «ні» або для коротких запитів із введенням тексту користувачем.

Його головною властивістю є Kirigami.Dialog.subtitle. До неї ви маєте додати текст. Якщо як дочірній елемент діалогового вікна запиту буде додано будь-який компонент QML, цей компонент займе місце підзаголовка, і це можна явно вказати за допомогою 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…"
                }
            }
        }
    }
}

MenuDialog

Kirigami.MenuDialog — спеціалізоване діалогове вікно, яке використовують для показу користувачеві списку вибору з придатних до клацання пунктів з використанням властивості 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")
                }
            ]
        }
    }
}

Просте вікно MenuDialog зі списком дій, зокрема «Пуск» і «Пауза» для мультимедійних даних

Висувні панелі

Чіпси