Skip to main content
Salti al enhavo
Redakti ĉi tiun paĝon See source code Krei problemraporton pri dokumentado Formatting guidelines Style guidelines

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

A Kirigami.Action encapsulates a user interface action. We can use these to provide our applications with easy-to-reach actions that are essential to their functionality.

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

We are placing our Kirigami.Action within our main page from the previous tutorials. If we wanted to, we could add more actions to our page (and even nest actions within actions!).

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

The next component is a Kirigami.GlobalDrawer. It shows up as a hamburger menu. By default it opens a sidebar, which is especially useful on mobile, as the user can just swipe in a side of the screen to open it. Global drawers are useful for global navigation and actions. We are going to create a simple global drawer that includes a "quit" button.

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

Here, we put our global drawer inside our application window. The main property we need to pay attention to is GlobalDrawer.actions, which takes the form of an array of Kirigami.Action components. This action has an appropriate icon and executes the Qt.quit() function when triggered, closing the application.

Since we are keeping our global drawer simple for now, we are setting the GlobalDrawer.isMenu property to true. This displays our global drawer as a normal application menu, taking up less space than the default global drawer pane.

Ĉiea tirkesto

Ĉiea tirkesto

Ĉiea tirkesto kiel menuo

Ĉiea tirkesto kiel menuo

Agoj estas kontekstaj

Kirigami components are designed in such a way that the place where you put Kirigami Actions is relevant. As seen above, if you add actions to a Kirigami.Page, Kirigami.ScrollablePage or any other derivative Page component, they will show up on the right side of the header in desktop mode, and on the bottom in mobile mode.

Similarly, if Kirigami Actions are added to a Kirigami.GlobalDrawer, they will show up in the resulting drawer or menu.

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