Toevoegen van acties

Meer te weten komen over acties van Kirigami zal ons helpen om onze toepassing nuttiger te maken.

Samenvattend

Tot nu toe hebben we een eenvoudige toepassing gemaakt die kaarten kan tonen. We hebben echter nog geen manier om door de gebruiker nieuwe kaarten aan de kaartweergave toe te voegen.

In deze inleiding zullen we kijken naar acties van Kirigami. Deze zullen ons helpen interactiviteit toe te voegen aan onze toepassing op een consistente, snelle en toegankelijke manier.

Acties

Een Kirigami.Action omvat geheel een actie in de gebruikersinterface. We kunnen deze gebruiken om onze toepassingen te voorzien van gemakkelijk te bereiken acties die essentieel zijn voor hun functionaliteit.

Als u Kirigami toepassingen eerder hebt gebruikt, hebt u zeker samengewerkt met acties van Kirigami. In deze afbeelding kunnen we acties rechts van de paginatitel zien met verschillende pictogrammen. Acties van Kirigami kunnen op verschillende manieren getoond worden en kunnen een brede variëteit van dingen doen.

Aftellingen toevoegen

Een aftel toepassing is tamelijk nutteloos zonder de mogelijkheid om aftellingen toe te voegen. Laten we een actie aanmaken die ons dat laat doen.

pageStack.initialPage: Kirigami.ScrollablePage {
    // Andere paginaeigenschappen...
    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 plaatsen onze Kirigami.Action op onze hoofdpagina uit de eerdere instructie. Als we het willen, dan kunnen we meer acties aan onze pagina (en zelfs geneste acties in acties!) toevoegen.

De haakjes [] hierboven gebruikt zijn vergelijkbaar met JavaScript arrays, wat inhoud dat u een of meer argumenten aan ze kan doorgeven, gescheiden door komma's:

// Algemeen JavaScript array met componenten:
variable: [ component1, component2 ]
// Het doorgeven van een array met Kirigami acties naar QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]

De eigenschappen id en text zouden bekend moeten zijn uit eerdere instructies. De geërfde eigenschap Action.icon zou interessant moeten zijn: het is een object met verschillende eigenschappen die u bepaalde pictogrammen voor uw acties laat tonen. Gelukkig alles wat we nodig hebben, bij gebruik van KDE pictogrammen, het leveren van de naameigenschap voor de pictogrameigenschap, icon.name.

De eigenschap onTriggered is de belangrijkste. Dit is wat onze actie zal doen wanneer het wordt gebruikt. U zult opmerken dat in ons voorbeeld we de methode kountdownModel.append van het kountdownModel gebruiken dat we in onze vorige inleiding hebben aangemaakt. Deze methode laten ons een nieuw element toevoegen aan ons lijstmodel. We leveren het met een object (aangegeven door accolades {}) dat de relevante eigenschappen heeft voor ons aftellen (naam, beschrijving en een plaatshouder datum).


Elke keer dat we op onze knop "Aftellen toevoegen" rechtsboven klikken, wordt onze aangepaste aftelling toegevoegd

Elke keer dat we op onze knop "Aftellen toevoegen" rechtsboven klikken, wordt onze aangepaste aftelling toegevoegd

Mobiele versie

Mobiele versie

Globale schuiflade

Het volgende component is een Kirigami.GlobalDrawer. Het verschijnt als een hamburger menu. Standaard opent het een zijbalk, wat met name zinvol is bij een mobieltje, omdat de gebruiker gewoon langs de zijkant van het scherm een veegbeweging kan maken om het te openen. Globale schuiflades zijn erg handig voor de algemene navigatie en de bijbehorende acties. We gaan een eenvoudige schuiflade creëren met daarop een knop "afsluiten".

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

Hier stoppen we onze globale schuiflade in ons toepassingsvenster. De hoofdeigenschap die we nodig hebben om aandacht aan te geven is GlobalDrawer.actions, die de vorm van een array met Kirigami.Action componenten aanneemt. Deze actie heeft een toepasselijk pictogram en start de functie Qt.quit(), om de toepassing af te sluiten.

Omdat we onze globale schuiflade voor nu eenvoudig houden, stellen we de eigenschap GlobalDrawer.isMenu in op true. Dit toont onze globale schuiflade als een normaal toepassingsmenu, die minder ruimte inneemt dan het standaard globale schuifladepaneel.

Globale schuiflade

Globale schuiflade

Globale schuiflade als menu

Globale schuiflade als menu

De context van acties

Kirigami componenten zijn zodanig ontworpen dat de plaats waar de Kirigami acties geplaatst worden relevant is. Zoals hierboven te zien is, dat als acties aan een Kirigami.Page, Kirigami.ScrollablePage of elke andere afgeleide pagina-component wordt toegevoegd, dan verschijnen ze aan de rechterzijde van de titel in de desktop mode, en aan de onderkant in de mobile mode.

Daarentegen als if Kirigami acties worden toegevoegd aan een Kirigami.GlobalDrawer, dan verschijnen ze in de resulterende lade of menu.

Andere voorbeelden van Kirigami acties die op andere plekken verschijnen afhankelijk van hun oudercomponent zijn:

Tussen andere Kirigami-componenten

Onze toepassing (app) tot zover

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
Indelingen, Lijstweergaven en Kaarten
Next
Een dialoog toevoegen