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 aconseguit crear una aplicació senzilla que pot mostrar targetes. No obstant això, encara no tenim una forma d'afegir targetes noves a la nostra 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 Kirigami Actions. En aquesta imatge, podem veure les accions a la dreta del títol de la pàgina amb diverses icones. Les Kirigami Actions 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 {
    ...
    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
        })
    }
    ...
}

Estem col·locant la nostra acció de Kirigami dins de la nostra pàgina principal de les nostres guies d'aprenentatge anteriors. Si volguéssim, podríem afegir més accions a la nostra pàgina. (Fins i tot imbricar accions dins de les accions!) Els components Kirigami.Action s'utilitzen com a accions contextuals dins les pàgines de Kirigami. Ho estem configurant específicament per a la propietat actions.main de la Kirigami.Page : l'objecte actions té propietats que ens permeten establir accions diferents en posicions diferents, però atès que la nostra acció «Add kountdown» és fonamental per a la nostra interfície d'usuari, l'establirem com l'acció principal d'aquesta pàgina.

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.

Nota

El Cuttlefish és una aplicació KDE que permet veure totes les icones que podreu utilitzar per a la vostra aplicació. Ofereix una sèrie de característiques útils: com vistes prèvies de la seva aparença en els diferents temes instal·lats, vistes prèvies en mides diferents i més. Potser us resultarà una eina útil a l'hora de decidir quines icones emprar en la vostra aplicació.

Moltes de les icones del KDE segueixen l'especificació d'anomenat d'icones de FreeDesktop. Per tant, també pot resultar útil consultar el lloc web del projecte FreeDesktop, el qual llista tots els noms d'icones compatibles amb tots els escriptoris.

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.

Calaix global

Heu vist aquelles tres línies al costat del títol de la pàgina en la captura de pantalla anterior? És un menú d'hamburguesa que obre un Kirigami.GlobalDrawer . Els calaixos globals són útils per a la navegació i les accions globals: en altres paraules, aquelles coses que podríeu necessitar emprar a través de tota la vostra aplicació. Crearem un calaix global senzill que inclou un botó per a sortir.

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

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.

Nota

La pàgina components basats en Actions d'aquesta documentació, proporciona més detalls sobre les accions del Kirigami i com es poden utilitzar.

La nostra aplicació fins ara

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

Disposicions (Layout), vistes de llista (ListView) i targetes (Card)

Crear fulls superposats