Skip to main content
Gå till innehåll
Redigera sidan See source code Skapa dokumentationsfelrapport Formatting guidelines Style guidelines

Lägga till åtgärder

Att lära oss mer om åtgärder i Kirigami hjälper oss att göra vårt program användbarare.

Sammanfattning

Hittills har vi lyckats bygga ett enkelt program som kan visa kort. Vi har dock inte ännu något sätt att lägga till nya kort i kortvyn.

I den här handledningen tar vi en titt på åtgärder i Kirigami. De hjälper oss att lägga till interaktivitet i vårt program på ett konsekvent, snabbt och tillgängligt sätt.

Åtgärder

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.

Om du har använt Kirigami-program tidigare, har du med säkerhet interagerat med Kirigiami åtgärder. På den här bilden kan vi se åtgärder till höger om sidans titel med olika ikoner. Åtgärder i Kirigami kan visas på flera olika sätt och kan göra ett stort antal saker.

Lägga till nedräknare

Ett nedräkningsprogram är ganska oanvändbart utan möjlighet att lägga till nedräknare. Låt oss skapa en åtgärd som låter oss göra det.

pageStack.initialPage: Kirigami.ScrollablePage {
    // Andra sidegenskaper...
    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 parenteser "[]" som används ovan liknar Javascript-fält, vilket innebär att man kan skicka en eller flera saker till dem, separerade med kommatecken:

// Allmänt Javascript-fält med komponenter:
variable: [ component1, component2 ]
// Skicka ett fält med Kirigami-åtgärder till QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]

Egenskaperna id och text bör vara välkända från tidigare handledningar. Dock kan den ärvda egenskapen Action.icon vara intressant: det är ett objekt med flera egenskaper som låter dig visa vissa ikoner för dina åtgärder. Lyckligtvis är allt vi behöver göra för att använda KDE-ikoner att tillhandahålla namnegenskapen i icon-egenskapen, icon.name.

Egenskapen onTriggered är den viktigaste. Det är vad vår åtgärd gör när den används. Du märker att i vårt exempel använder vi metoden kountdownModel.append från kountdownModel som vi skapade i vår föregående handledning. Metoden låter oss lägga till ett nytt element i vår listmodell. Vi tillhandahåller den med ett objekt (angivet av klammerparenteser {}) som har relevanta egenskaper för våra nedräknare (name, description, och ett platsmarkerande date).


Varje gång vi nu klickar på vår knapp "Add Kountdown" längst upp till höger, läggs vår egna nedräknare till

Varje gång vi nu klickar på vår knapp "Add Kountdown" längst upp till höger, läggs vår egna nedräknare till

Mobilversion

Mobilversion

Global låda

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
    // Andra fönsteregenskaper...
    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.

Global låda

Global låda

Global låda som en meny

Global låda som en meny

Åtgärder är sammanhangsberoende

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.

Andra exempel på Kirigami Actions som visas olika beroende på överliggande komponent är:

Bland andra komponenterna i Kirigami.

Vårt program så långt

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
Layouter, listvyer och kort
Next
Lägga till en dialogruta