Aldonante agojn

Lerni pli pri la Agoj de Kirigami helpos nin fari nian aplikaĵon pli utila.

Resumo

Ĝis nun, ni konstruis simplan apon kiu povas montri kartojn. Tamen, nuntempe ne ekzistas maniero por la uzanto aldoni novajn kartojn al la kartvido.

En ĉi tiu lernilo, ni rigardos Kirigami-agojn. Ĉi tiuj helpos nin aldoni interagadon al nia aplikaĵo en konsekvenca, rapida kaj alirebla maniero.

Agoj

Kirigami.Action enkapsuligas uzantinterfacon. Ni povas uzi ĉi tiujn por provizi niajn aplikojn per facile atingeblaj agoj, kiuj estas esencaj por ilia funkcieco.

Se vi antaŭe uzis Kirigami-apojn, vi certe interagis kun Kirigami-agoj. En ĉi tiu bildo, ni povas vidi agojn dekstre de la paĝotitolo kun diversaj piktogramoj. Kirigami-agoj povas esti montrataj en pluraj manieroj kaj povas fari diversajn aferojn.

Aldonante retronombradojn

Retronombrada programo estas sufiĉe senutila sen la kapablo aldoni retronombradojn. Ni kreu agon, kiu permesos al ni fari ĉi tion.

pageStack.initialPage: Kirigami.ScrollablePage {
    // Aliaj paĝaj trajtoj...
    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
            })
        }
    ]
    // ...
}

Ni metas nian Kirigami.Action ene de nia ĉefa paĝo de la antaŭaj lerniloj. Se ni volus, ni povus aldoni pli da agoj al nia paĝo (kaj eĉ nesti agojn ene de agoj!).

La krampoj [] uzataj supre estas similaj al JavaScript arrays, kio signifas, ke vi povas transdoni unu aŭ plurajn aferojn al ili, apartigitaj per komo:

// Ĝenerala JavaScript aro de komponantoj:
variable: [ component1, component2 ]
// Transdonante aron de Kirigami-agoj al QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]

La ecoj id kaj text devus esti konataj de antaŭaj lerniloj. Tamen, la heredita Action.icon devus esti interesa: ĝi estas objekto kun pluraj ecoj. lasante vin montri certajn piktogramojn por viaj agoj. Feliĉe, por uzi KDE-piktogramojn, ĉio, kion ni devas fari, estas provizi la nomproprecon por la piktograma propreco, icon.name.

La onTriggered signaltraktilo estas la plej grava. Jen kion faros nia ago kiam ĝi estos uzata. Vi rimarkos, ke en nia ekzemplo ni uzas la metodon kountdownModel.append de la kountdownModel ni kreis en nia antaŭa lernilo. Ĉi tiu metodo permesas al ni aldoni novan elementon al nia listo-modelo. Ni provizas ĝin per objekto (indikita per buklaj krampoj {}) kiu havas la koncernajn ecojn por niaj retronombradoj (nomo, priskribo, kaj lokokupilon dato).


Ĉiufoje kiam ni alklakas nian butonon "Aldoni kountdown" supre dekstre, nia propra retronombrado estas aldonita

Ĉiufoje kiam ni alklakas nian butonon "Aldoni kountdown" supre dekstre, nia propra retronombrado estas aldonita

Poŝtelefona versio

Poŝtelefona versio

Ĉiea tirkesto

La sekva komponanto estas Kirigami.GlobalDrawer. Ĝi aperas kiel hamburger-menuo. Defaŭlte ĝi malfermas flankbreton, kiu estas precipe utila ĉe poŝtelefono, ĉar la uzanto povas simple gliti en flankon de la ekrano por malfermi ĝin. Ĉieaj tirkestoj estas utilaj por ĉiea navigado kaj agoj. Ni kreos simplan ĉiean tirkeston, kiu inkluzivas butonon "ĉesi".

Kirigami.ApplicationWindow {
    id: root
    // Aliaj fenestraj proprecoj...
    globalDrawer: Kirigami.GlobalDrawer {
        isMenu: true
        actions: [
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
    // ...
}

Ĉi tie ni metas nian ĉiean tirkeston ene de nia aplika fenestro. La ĉefa eco, kiun ni devas atenti, estas GlobalDrawer.actions, kiu prenas la formon de tabelo de Kirigami.Action komponantoj. Ĉi tiu ago havas taŭgan piktogramon kaj efektivigas la funkcion Qt.quit() kiam ĝi estas ekigita, fermante la aplikaĵon.

Ĉar ni nun simpligas nian ĉiean tirkeston, ni fiksas la proprecon GlobalDrawer.isMenu al true. Ĉi tio montras nian ĉiean tirkeston kiel normalan aplikaĵmenuon, okupante malpli da spaco ol la defaŭlta ĉiea kestofenestro.

Ĉiea tirkesto

Ĉiea tirkesto

Ĉiea tirkesto kiel menuo

Ĉiea tirkesto kiel menuo

Agoj estas kontekstaj

Kirigami-komponentoj estas desegnitaj tiel, ke la loko, kie vi metas Kirigami-Agojn, estas grava. Kiel vidite supre, se vi aldonas agojn al Kirigami.Paĝo, Kirigami.ScrollablePage aŭ ajna alia derivita Paĝa komponanto, ili aperos dekstre. de la kaplinio en labortabla reĝimo, kaj sur la malsupro en movebla reĝimo.

Simile, se Kirigami-Agoj estas aldonitaj al Kirigami.GlobalDrawer, ili aperos en la rezulta tirkesto aŭ menuo.

Aliaj ekzemploj de Kirigami-Agoj aperantaj alimaniere depende de sia gepatra komponento estas:

Inter aliaj Kirigami-komponentoj.

Nia aplikaĵo ĝis nun

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
        }
    }
}
Previous
Aranĝoj, ListViews kaj Kartoj
Next
Aldonante dialogon