Dodawanie działań

Nauka o działaniach Kirigami pomoże nam uczynić naszą aplikację bardziej użyteczną.

Powtórka

Do tej chwili, daliśmy radę zbudować prostą aplikację, która może wyświetlać karty. Jednakże nie mamy sposobu na dodawanie nowych kart do naszego widoku kart.

W tym samouczku, spojrzymy na działania Kirigami. Pomoże nam to dodawać interaktywnie do naszej aplikacji w spójny, szybki i przystępny sposób.

Działania

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.

Jeśli używałeś wcześniej aplikacji Kirigami, to na pewno obsługiwałeś je poprzez Działania Kirigami. Na tym obrazie, widzimy działania po prawej stronie tytułu okna z różnymi ikonami. Działania Kirigami można wyświetlić na kilka sposobów i są one w stanie robić różne rzeczy.

Dodawanie odliczań

Aplikacja odliczająca jest całkowicie bezużyteczna bez możliwości dodawania odliczań. Stwórzmy działanie, które nam to umożliwi.

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 are placing our Kirigami Action within our main page from our previous tutorials. If we wanted to, we could add more actions to our page (and even nest actions within actions!). Kirigami.Action components are used as contextual actions within Kirigami pages. We are setting it specifically to the actions.main property of our Kirigami.Page : the actions object has properties that let us set different actions in different positions, but since our "Add kountdown" action is central to our UI we are setting it as the main action of this page.

The id and text properties should be familiar from previous tutorials. However, the inherited Action.icon property should be interesting: it is an object with several properties letting you display certain icons for your actions. Fortunately, to use KDE icons all we need to do is provide the name property for the icon property, icon.name.

Uwaga

Cuttlefish jest aplikacją KDE, która umożliwia ci oglądanie wszystkich ikon, których możesz używać w swojej aplikacji. Daje kilka użytecznych możliwości, takich jak podgląd wyglądu przy różnych ustawieniach wyglądu systemu, podgląd przy różnych rozmiarach i więcej. Przydaje się przy określaniu, których ikon użyć w swojej aplikacji.

Many of KDE's icons follow the FreeDesktop Icon Naming specification. Therefore, you might also find it useful to consult The FreeDesktop project's website, which lists all cross-desktop compatible icon names.

The onTriggered signal handler is the most important. This is what our action will do when it is used. You'll notice that in our example we're using the method kountdownModel.append of the kountdownModel we created in our previous tutorial. This method lets us append a new element to our list model. We are providing it with an object (indicated by curly braces {}) that has the relevant properties for our countdowns (name, description, and a placeholder date).

Each time we click our "Add kountdown" button on the top right, our custom countdown is added

Globalna półka

Did you notice those three lines next to the page title on the previous screenshot? That's a hamburger menu that opens a Kirigami.GlobalDrawer . Global drawers are useful for global navigation and actions: in other words, those things you might need to use throughout your application. We are going to create a simple global drawer that includes a "quit" button.

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

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.

Uwaga

The Actions based components page of these docs provides further detail on Kirigami Actions and how they can be used.

Nasza aplikacja w tej chwili

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

Układy, widoki list oraz karty

Tworzenie arkuszy nakładkowych