Дії з додавання

Ширші знання щодо дій Kirigami допоможуть нам зробити нашу програму кориснішою.

Коротке повторення

Поки що нам вдалося побудувати просту програму, яка може показувати картки. Втім, у нас ще немає способу додавання нових карток до нашої панелі карток.

У цій частині підручника ми розглянемо дії Kirigami. Ці дії допоможуть нам додати інтерактивності нашій програмі у сумісний, швидкий і доступний спосіб.

Дії

Дія Kirigami.Action є контейнером для дії з інтерфейсом користувача. Діями можна скористатися для надання нашій програмі легкодоступних дій, які є критичними для виконання нею функціональних можливостей.

Пункти дій сторінки на робочій станції

Пункти дій сторінки на робочій станції

Пункти дій на мобільному пристрої

Пункти дій на мобільному пристрої

Якщо ви раніше користувалися програмами Kirigami, ви напевне взаємодіяли із діями Kirigami. На цьому зображенні ми можемо бачити кнопки дій праворуч від заголовка сторінки із різноманітними піктограмами. Дії Kirigami може бути показано у декілька способів. Вони можуть виконувати широкий діапазон завдань.

Додавання відліків

Програма із зворотним відліком буде непотрібною без можливості додавання зворотних відліків. Давайте створимо дію, яка надасть нам змогу додавати зворотні відліки.

pageStack.initialPage: Kirigami.ScrollablePage {
    ...
    actions.main: Kirigami.Action {
        id: addAction
        icon.name: "list-add"
        text: i18nc("@action:button", "Add kountdown")
        onTriggered: kountdownModel.append({
            name: "Kirigami Action added card!",
            description: "Congratulations, your Kirigami Action works!",
            date: 1000
        })
    }
    ...
}

Ми розташовуємо нашу дію Kirigami у нашій головній сторінці з попередніх розділів нашого підручника. Якщо нам захочеться, ми можемо додати інші дії на нашу сторінку (і навіть вкласти дії в інші дії!). Компоненти Kirigami.Action використовують як контекстні дії у межах сторінок Kirigami. Ми надаємо це значення властивості actions.main Kirigami.Page : об'єкт actions має властивості, які надають нам можливість встановлювати різні дії у різних позиціях, але оскільки наша дія «Add kountdown» є центральною для нашого інтерфейсу користувача, ми робимо її основною дією нашої сторінки.

Із властивостями id і text ми вже познайомилися у попередніх розділах підручника. Втім, нас має зацікавити нова властивість Action.icon: це об'єкт із декількома властивостями, за допомогою якого можна показувати певні піктограми для наших дій. На щастя, щоб скористатися піктограмами KDE достатньо надати назву для властивості піктограми, icon.name.

Найважливішою є обробник сигналів onTriggered . Вона визначає те, що буде виконано, коли використовуватиметься наша дія. Ви можете зауважити, що у нашому прикладі ми використовуємо метод kountdownModel.append kountdownModel.append, який було створено у попередньому розділі нашого підручника. За допомогою цього методу можна додати новий елемент до нашої моделі списку. Ми надаємо методу об'єкт (позначений фігурними дужками {}), який має відповідні властивості для наших відліків (name, description та замінник date).

Кожного разу, коли ми натискатимемо кнопку «Add kountdown» у верхній правій частині вікна, додаватиметься наш нетиповий відлік.

Кожного разу, коли ми натискатимемо кнопку «Add kountdown» у верхній правій частині вікна, додаватиметься наш нетиповий відлік.

Мобільна версія

Мобільна версія

Загальна панель

Помітили три риски поряд із заголовком сторінки на попередньому знімку вікна? Це меню-гамбургер, яке відкриває Kirigami.GlobalDrawer . Загальні висувні панелі корисні для загальної навігації і дій: іншими словами, тих речей, які можуть знадобитися усюди у вашій програмі. Ми створимо просту загальну висувну панель, на якій міститиметься кнопка виходу з програми.

Kirigami.ApplicationWindow {
    id: root
    ...
    globalDrawer: Kirigami.GlobalDrawer {
        isMenu: true
        actions: [
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "gtk-quit"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
    ...
}

Тут ми розмістили нашу загальну висувну панель у нашому вікні програми. Головною властивістю, якій ми маємо приділити увагу, є GlobalDrawer.actions . Ця властивість приймає значення масиву компонентів Kirigami.Action . Ця дія має відповідну піктограму і запускає функцію Qt.quit() , яка завершує роботу програми.

Оскільки ми поки зберігаємо простоту нашої загальної висувної панелі, ми встановлюємо для GlobalDrawer.isMenu значення true. У результаті нашу загальну висувну панель буде показано як звичайне меню програми, яке займатиме менше місця за типову загальну висувну панель.

Загальна панель

Загальна панель

Загальна панель як меню

Загальна панель як меню

Наша програма на поточний момент

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    id: root

    title: i18nc("@title:window", "Day Kountdown")

    // Global drawer element with app-wide actions
    globalDrawer: Kirigami.GlobalDrawer {
        // Makes drawer a small menu rather than sliding pane
        isMenu: true
        actions: [
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "gtk-quit"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }

    ListModel {
        id: kountdownModel
        ListElement {
            name: "Dog birthday!!"
            description: "Big doggo birthday blowout."
            date: 100
        }
    }

    Component {
        id: kountdownDelegate
        Kirigami.AbstractCard {
            contentItem: Item {
                implicitWidth: delegateLayout.implicitWidth
                implicitHeight: delegateLayout.implicitHeight
                GridLayout {
                    id: delegateLayout
                    anchors {
                        left: parent.left
                        top: parent.top
                        right: parent.right
                    }
                    rowSpacing: Kirigami.Units.largeSpacing
                    columnSpacing: Kirigami.Units.largeSpacing
                    columns: root.wideScreen ? 4 : 2

                    Kirigami.Heading {
                        Layout.fillHeight: true
                        level: 1
                        text: date
                    }

                    ColumnLayout {
                        Kirigami.Heading {
                            Layout.fillWidth: true
                            level: 2
                            text: name
                        }
                        Kirigami.Separator {
                            Layout.fillWidth: true
                            visible: description.length > 0
                        }
                        Controls.Label {
                            Layout.fillWidth: true
                            wrapMode: Text.WordWrap
                            text: description
                            visible: description.length > 0
                        }
                    }
                    Controls.Button {
                        Layout.alignment: Qt.AlignRight
                        Layout.columnSpan: 2
                        text: i18n("Edit")
                        //onClicked: to be done... soon!
                    }
                }
            }
        }
    }

    pageStack.initialPage: Kirigami.ScrollablePage {
        title: i18nc("@title", "Kountdown")

        // Kirigami.Action encapsulates a UI action. Inherits from Controls.Action
        actions.main: Kirigami.Action {
            id: addAction
            // Name of icon associated with the action
            icon.name: "list-add"
            // Action text, i18n function returns translated string
            text: i18nc("@action:button", "Add kountdown")
            // What to do when triggering the action
            onTriggered: kountdownModel.append({
                name: "Kirigami Action added card!",
                description: "Congratulations, your Kirigami Action works!",
                date: 1000
            })
        }

        Kirigami.CardsListView {
            id: layout
            model: kountdownModel
            delegate: kountdownDelegate
        }
    }
}