Afegir accions

Aprendre més sobre les Kirigami Actions ens ajudarà a fer que la nostra aplicació sigui més útil.

Recapitulació

Fins ara, hem construït una aplicació senzilla que pot mostrar targetes. No obstant això, encara no hi ha cap manera que l'usuari afegeixi targetes noves a la vista de targetes.

En aquesta guia d'aprenentatge, veurem les accions de Kirigami. Aquestes ens ajudaran a afegir interactivitat a la nostra aplicació d'una manera coherent, ràpida i accessible.

Accions

Una Kirigami.Action encapsula una acció de la interfície d'usuari. Podem utilitzar-les per a proporcionar a les nostres aplicacions accions de fàcil accés que són essencials per a la seva funcionalitat.

Si heu emprat abans les aplicacions escrites en Kirigami, certament heu interactuat amb les accions del Kirigami. En aquesta imatge, podem veure les accions a la dreta del títol de la pàgina amb diverses icones. Les accions del Kirigami es poden mostrar de diverses maneres i poden realitzar una àmplia varietat de coses.

Afegir comptes enrere

Una aplicació de compte enrere és força inútil sense la capacitat d'afegir-ne. Crearem una acció que ens permeti fer-ho.

pageStack.initialPage: Kirigami.ScrollablePage {
    // Altres propietats de la pàgina...
    actions: [
        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
            })
        }
    ]
    // ...
}

Estem col·locant la nostra Kirigami.Action dins de la nostra pàgina principal a partir de les guies d'aprenentatge anteriors. Si volguéssim, podríem afegir més accions a la nostra pàgina (i fins i tot niar accions dins d'accions!).

Els claudàtors [], que s'han utilitzat anteriorment són similars a les matrius de JavaScript, el qual vol dir que podeu passar-hi una o més coses, separades per comes:

// Matriu general de components JavaScript:
variable: [ component1, component2 ]
// Passar una matriu d'accions del Kirigami al QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]

Les propietats id i text haurien de ser familiars de guies d'aprenentatge anteriors. No obstant això, la propietat nova heretada Action.icon hauria de ser interessant: és un objecte amb diverses propietats que permet mostrar certes icones per a les vostres accions. Afortunadament, per a utilitzar les icones del KDE, tot el que hem de fer és proporcionar el nom de la propietat per a la propietat d'icona, icon.name.

El controlador de senyals onTriggered és el més important. És el que farà la nostra acció quan s'utilitzi. Notareu que en el nostre exemple fem servir el mètode kountdownModel.append del kountdownModel que hem creat en la nostra guia d'aprenentatge anterior. Aquest mètode ens permet afegir un element nou al nostre model de llista. Proporcionem un objecte (indicat per les claus {}) que té les propietats rellevants per als nostres comptes enrere (name, description i una date de marcador de posició).


Cada vegada que fem clic sobre el nostre botó «Add kountdown» que hi ha a la part superior dreta, s'afegirà el nostre compte enrere personalitzat.

Cada vegada que fem clic sobre el nostre botó «Add kountdown» que hi ha a la part superior dreta, s'afegirà el nostre compte enrere personalitzat.

Versió mòbil

Versió mòbil

Calaix global

El component següent és un Kirigami.GlobalDrawer . Es mostra com un menú d'hamburguesa. De manera predeterminada obre una barra lateral, que és especialment útil en el mòbil, ja que l'usuari pot lliscar en un costat de la pantalla per a obrir-la. Els calaixos globals són útils per a la navegació i les accions globals. Crearem un calaix global senzill que inclou un botó «quit».

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

Aquí, col·locarem el nostre calaix global dins de la finestra de la nostra aplicació. La propietat principal a la qual hem de parar atenció és GlobalDrawer.actions , que pren la forma d'una matriu de components Kirigami.Action . Aquesta acció té una icona adequada i executa la funció Qt.quit() quan s'activa, tancant l'aplicació.

Atès que, per ara, mantenim senzill el nostre calaix global, establim la propietat GlobalDrawer.isMenu a true. Això mostrarà el nostre calaix global com un menú normal d'aplicació, ocupant menys espai que la subfinestra predeterminada del calaix global.

Calaix global

Calaix global

Calaix global com a menú

Calaix global com a menú

Les accions són contextuals

Els components del Kirigami estan dissenyats de tal manera que el lloc on poseu les accions del Kirigami és rellevant. Com s'ha vist anteriorment, si afegiu accions a una Kirigami.Page , Kirigami.ScrollablePage o qualsevol altre component derivat de pàgina, es mostraran a la part dreta de la capçalera en el mode d'escriptori i a la part inferior en el mode de mòbil.

De manera similar, si les accions del Kirigami s'afegeixen a un Kirigami.GlobalDrawer , es mostraran al calaix o menú resultant.

Altres exemples d'accions del Kirigami que es mostren de manera diferent depenent del seu component pare són:

Entre altres components del Kirigami.

La nostra aplicació fins ara

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"
                // 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
Disposicions (Layout), vistes de llista (ListView) i targetes (Card)
Next
Afegir un diàleg