Skip to main content
Spring naar inhoud
Deze pagina bewerken See source code Documentatieprobleem aanmaken Formatting guidelines Style guidelines

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

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.

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 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!).

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

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
    // Andere venstereigenschappen...
    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.

Globale schuiflade

Globale schuiflade

Globale schuiflade als menu

Globale schuiflade als menu

De context van acties

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.

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