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 have een eenvoudige toepassing kunnen maken die kaarten kan tonen. We hebben echter nog geen manier om nieuwe kaarten aan onze 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 {
    ...
    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
        })
    }
    ...
}

We plaatsen onze actie van Kirigami in onze hoofdpagina uit onze eerdere inleidingen. Als we dat willen kunnen we meer acties aan onze pagina toevoegen (en zelfs acties nesten in acties!). Componenten Kirigami.Action worden gebruikt als contextuele acties binnen Kirigami pagina's. We stellen ze specifiek in op de eigenschap actions.main van onze Kirigami.Page : het object actions heeft eigenschappen die ons verschillende acties in verschillende posities laat instellen, maar omdat onze actie "Add kountdown" centraal voor onze UI is, zetten we het als de hoofdactie op deze pagina.

De eigenschappen id en text zouden bekend moeten zijn uit eerdere inleidingen. 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.

Notitie

Cuttlefish is een KDE toepassing die u alle pictogrammen laat zien die u voor uw toepassing kunt gebruiken. Het biedt een aantal nuttige functies zoals voorbeelden van hun uiterlijk over verschillende geïnstalleerde thema's, voorbeelden bij verschillende groottes en meer. U zou het een nuttig hulpmiddel kunnen vinden bij beslissen over welke pictogrammen in uw toepassing te gebruiken.

Veel van de pictogrammen van KDE volgen de specificatie FreeDesktop Icon Naming. U zou het daarom ook nuttig kunnen vinden om de website van The FreeDesktop project te consulteren, die lijsten heeft van cross-desktop compatibele pictogramnamen.

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

Globale schuiflade

Hebt u de drie regels naast de paginatitel op de vorige schermafdruk gezien? Dat is een hamburgermenu dat een Kirigami.GlobalDrawer opent. Globale schuifladen zijn nuttig voor globale navigatie en acties: met andere woorden, die dingen die u nodig kunt hebben om uw gehele toepassing te gebruiken. We gaan een eenvoudige globale schuiflade aanmaken die een afsluitknop bevat.

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

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.

Notitie

De pagina op acties gebaseerde componenten van deze documenten levert verdere details over acties van Kirigami en hoe ze gebruikt kunnen worden.

Onze toepassing (app) tot zover

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

Indelingen, Lijstweergaven en Kaarten

Overlay-vellen aanmaken