Dodajanje dejanj

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

About Kirigami API documentation: use https://api-staging.kde.org/kirigami-index.html for now

Click here to read more

We are aware of issues involving broken links to Kirigami API documentation. We are currently working on a better website to address these issues, porting the API docs where possible.

In its current state, the staging API website under development for Kirigami can be used to access all relevant Kirigami API pages, and it should already work better than the previous API website. You can access the staging API website through https://api-staging.kde.org/kirigami-index.html.

If you'd like to assist us in our efforts to port the API documentation, take a look at our Port API documentation to QDoc metatask.

Povzetek

Doslej smo zgradili preprosto aplikacijo, ki lahko prikazuje kartice. Vendar uporabnik trenutno ne more dodati novih kartic v 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 lahko prikažemo 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 {
    // Druge lastnosti strani...
    actions: [
        Kirigami.Action {
            id: addAction
            icon.name: "list-add-symbolic"
            text: i18nc("@action:button", "Add kountdown")
            onTriggered: kountdownModel.append({
                name: "Kirigami Action added card!",
                description: "Congratulations, your Kirigami Action works!",
                date: 1000
            })
        }
    ]
    // ...
}

Naše Kirigami.Action postavljamo na glavno stran iz prejšnjih učbenikov. Če bi želeli, bi lahko naši strani dodali več dejanj (in celo ugnezdili dejanja znotraj dejanj!).

Zgoraj uporabljeni oklepaji [] so podobni poljem JavaScript, kar pomeni, da jim lahko posredujete eno ali več stvari, ločenih z vejico:

// Splošno polje komponent JavaScript:
variable: [ component1, component2 ]
// Posredovanje niza dejanj Kirigami v QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]

Lastnosti id in text morate poznati iz prejšnjih vadnic. Vendar bi morala biti podedovana lastnost Action.icon zanimiva: gre za objekt z več lastnostmi omogoča prikaz določenih ikon za vaša dejanja. Na srečo moramo za uporabo ikon KDE zagotoviti samo lastnost imena za lastnost ikone, icon.name.

Ogled razpoložljivih ikon

Kliknite tukaj, če želite videti, kako preverite razpoložljive ikone v vašem sistemu

Cuttlefish je aplikacija KDE, ki vam omogoča ogled vseh ikon, ki jih lahko uporabite za svojo aplikacijo. Ponuja številne uporabne funkcije, kot so predogled njihovega videza v različnih nameščenih temah, predogledi v različnih velikostih in drugo. Morda se vam zdi uporabno orodje, ko se odločate, katere ikone boste uporabili v svoji aplikaciji.

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

Naslednja komponenta je Kirigami.GlobalDrawer. Prikaže se kot hamburger meni. Privzeto odpre stransko vrstico, kar je še posebej uporabno na mobilnih napravah, saj lahko uporabnik samo potegne ob strani zaslona, da jo odpre. Globalni predali so uporabni za globalno navigacijo in dejanja. Ustvarili bomo preprost globalni predal, ki vključuje gumb "quit".

Kirigami.ApplicationWindow {
    id: root
    // Druge lastnosti oken...
    globalDrawer: Kirigami.GlobalDrawer {
        isMenu: true
        actions: [
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                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.

Nasvet

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

Dejanja so kontekstualna

Komponente Kirigami so zasnovane tako, da je mesto, kamor postavite Kirigami Actions, ustrezno. Kot je prikazano zgoraj, če dodate dejanja v Kirigami.Page, Kirigami.ScrollablePage ali katero koli drugo izpeljano komponento strani, se bodo prikazala na desni strani glave v namiznem načinu in na dnu v mobilnem načinu.

Podobno, če so dejanja Kirigami dodana v Kirigami.GlobalDrawer, bodo prikazana v nastalem predalu ali meniju.

Drugi primeri dejanj Kirigami, ki se prikazujejo drugače glede na njihovo nadrejeno komponento, so:

Kirigami.ContextDrawer - Učbenik za ContextDrawer
Kirigami.AbstractCard in izpeljanke - Učbenik za kartice
Kirigami.Dialog in izpeljanke - Učbenik Dialoga
Kirigami.ActionToolBar - Učbenik ActionToolBar

Med drugimi komponentami Kirigami.

Naša aplikacija do sedaj

Main.qml:

  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
110
111
112
113
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    id: root

    width: 400
    height: 300

    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: "application-exit-symbolic"
                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")
                    }
                }
            }
        }
    }

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

        // Kirigami.Action encapsulates a UI action. Inherits from Controls.Action
        actions: [
            Kirigami.Action {
                id: addAction
                // Name of icon associated with the action
                icon.name: "list-add-symbolic"
                // 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: cardsView
            model: kountdownModel
            delegate: kountdownDelegate
        }
    }
}

Postavitve, seznam pogledov in kartice

Dodajanje pogovornega okna