Dodajanje dejanj

Več informacij o Kirigamijevih aktivnostih nam bo pomagalo, da bo naša aplikacija še bolj uporabna.

Povzetek

Doslej nam je uspelo zgraditi preprosto aplikacijo, ki lahko prikazuje kartice. Vendar še nimamo načina dodajanja novih kartic v naš pogled kartic.

V tem učbeniku, bomo videli akcije Kirigami. Te nam bodo pomagale dodati interaktivnost v našo aplikacijo na dosleden, hiter in dostopen način.

Dejanja

Kirigami.Action vsebuje dejanje uporabniškega vmesnika. Z njimi lahko našim aplikacijam zagotovimo enostavno dostopna dejanja, ki so bistvena za njihovo funkcionalnost.

Če ste že prej uporabljali aplikacije Kirigami, ste zagotovo že spoznali interakcijo z Kirigami Actions. Na tej sliki lahko vidimo dejanja na desni strani naslova z različnimi ikonami. Kirigami Actions se lahko prikažejo na več načinov in lahko naredijo veliko različnih stvari.

Dodajanje odštevanj

Aplikacija za odštevanje je precej neuporabna brez možnosti dodajanja odštevanja. Ustvarimo akcijo, ki nam bo to dovolila.

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
        })
    }
    ...
}

Mi smo postavili naše dejanje Kirigami Action znotraj naše glavne strani iz naših prejšnjih vaj. Če bi želeli, bi lahko na našo stran dodali še več dejanj (in celo ugnezdili dejanja znotraj dejanj!). Komponente Kirigami.Action se uporabljajo kot kontekstualna dejanja na straneh Kirigami. Posebej nastavljamo lastnost strani actions.main predmet naše strani Kirigami.Page ima lastnosti, ki nam dovolijo nastaviti različna dejanja na različnih položajih, ker pa je naše dejanje 'Add kountdown' osrednje za naš uporabniški vmesnik, ga nastavljamo kot glavno dejanje te strani.

Lastnosti 'id' in 'text' bi vam morale biti znane iz prejšnjih vaj. Vendar pa bi morala biti nova podedovana lastnost Action.icon zanimiva: je namreč predmet z več lastnostmi, ki vam dovolijo prikazati določene ikone za dejanja. Na srečo je za uporabo ikon KDE vse, kar moramo storiti, zagotoviti ime lastnosti ikone 'icon.name'.

Opomba

Cuttlefish je aplikacija KDE, ki vam dovoli, da si ogledate vse ikone, ki jih lahko uporabite za svojo aplikacijo. Ponuja številne uporabne funkcije, kot so predogledi njihovega videza v različnih nameščenih temah, predogledi v različnih velikostih in drugo. Pri odločanju, katere ikone boste uporabili v aplikaciji, boste morda našli uporabno orodje.

Mnoge ikone KDE sledijo specifikaciji poimenovanja ikon FreeDesktop. Zato se utegne biti tudi koristno, da se posvetujete s spletnim mestom projekta FreeDesktop, ki na svoji spletni strani našteva vsa imena združljivih ikon.

Prožilnik onTriggered je najpomembnejši. To bo naredila naša dejavnost, ko bo uporabljena. Opazili boste, da v našem primeru uporabljamo metodo kountdownModel.append modela 'kountdownModel', ki smo ga ustvarili v prejšnjih vajah. S to metodo lahko v naš model seznama priložimo nov element. Ponujamo mu predmet, ki ima ustrezne lastnosti za naše odštevanje (ime - name, opis - description in datum bodoče lokacije - placeholder date).

Vsakič, ko kliknemo naš gumb "Add kountdown" na zgornjem desnem kotu, je dodano naše odštevanje po meri

Globalni predal

Ste opazili tiste tri vrstice poleg naslova strani na prejšnjem zajemu zaslona? To je hamburger meni, ki odpira globalni predal Kirigami.GlobalDrawer . Globalni predali so uporabni za globalno krmarjenje in dejanja: z drugimi besedami, tiste stvari, ki jih boste morda morali uporabljati vseskozi v aplikaciji. Ustvarili bomo preprost globalni predal, ki vključuje gumb za zapiranje.

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()
            }
        ]
    }
    ...
}

Tukaj smo dali naš globalni predal v okno aplikacije. Glavna lastnost, na katero moramo biti pozorni, so dejavnosti GlobalDrawer.actions , ki so v obliki elementov vektorja komponent Kirigami.Action . To dejanje ima ustrezno ikono in sproži funkcijo Qt.quit() in zapre program.

Ker za zdaj ohranjamo naš globalni predal preprost, postavljamo lastnost GlobalDrawer.isMenu na true. To prikazuje naš globalni predal kot običajni meni aplikacije, ki zavzame manj prostora kot privzeto podokno globalnega predala.

Opomba

Stran Actions based componentsv teh dokumentih vsebuje dodatne podrobnosti o dejanjih Kirigami in načinu, kako jih je mogoče uporabiti.

Naša aplikacija do sedaj

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

Postavitve, seznam pogledov in kartice

Ustvarjanje prekrivnih listov