Skip to main content
Passa al contenuto
Modifica questa pagina See source code Crea un problema relativo alla documentazione Formatting guidelines Style guidelines

Aggiungere azioni

Imparare di più sulle azioni di Kirigami ci aiuterà a rendere la nostra applicazione più utile.

Ricapitoliamo

Finora abbiamo creato una semplice applicazione in grado di visualizzare le schede. Tuttavia, al momento non è possibile per l'utente aggiungere nuove schede alla visualizzazione schede.

In questa esercitazione guarderemo le azioni di Kirigami: ci aiuteranno ad aggiungere l'interattività al nostro programma, in modo coerente, veloce e accessibile.

Azioni

Un Kirigami.Action incapsula un'azione dell'interfaccia utente. Possiamo usarli per fornire alle nostre applicazioni azioni facili da raggiungere che sono essenziali per la loro funzionalità.

Se hai già usato delle applicazioni in Kirigami avrai certamente interagito con le azioni di Kirigami. In quest'immagine, alla destra del titolo della pagina possiamo vedere delle azioni con varie icone. Le azioni di Kirigami possono essere visualizzate in molti modi e possono fare molte cose.

Aggiunta dei conti alla rovescia

Un applicazione per il conto alla rovescia è abbastanza inutile senza la possibilità di aggiungerne qualcuno. Creiamo un'azione che ci permetterà di farlo.

pageStack.initialPage: Kirigami.ScrollablePage {
    // Altre proprietà della pagina...
    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
            })
        }
    ]
    // ...
}

Stiamo inserendo il nostro Kirigami.Action nella nostra pagina principale dei tutorial precedenti. Se volessimo, potremmo aggiungere più azioni alla nostra pagina (e persino annidare azioni all'interno di azioni!).

Le parentesi [] utilizzate sopra sono simili agli array JavaScript, il che significa che puoi passare loro uno o più elementi, separati da virgola:

// Array generale di componenti JavaScript:
variable: [ component1, component2 ]
// Passare una serie di azioni Kirigami a QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]

Le proprietà "id" e "text" dovrebbero essere familiari dai tutorial precedenti. Tuttavia, la proprietà ereditata Action.icon dovrebbe essere interessante: è un oggetto con diverse proprietà che ti consentono di visualizzare determinate icone per le tue azioni. Fortunatamente, per usare le icone di KDE tutto ciò che dobbiamo fare è fornire la proprietà name per la proprietà icon, icon.name.

Il gestore del segnale onTriggered è il più importante. Questo è ciò che farà la nostra azione quando verrà utilizzata. Noterai che nel nostro esempio stiamo utilizzando il metodo kountdownModel.append del kountdownModel che abbiamo creato nel nostro tutorial precedente. Questo metodo ci consente di aggiungere un nuovo elemento al nostro modello di elenco. Gli stiamo fornendo un oggetto (indicato dalle parentesi graffe {}) che ha le proprietà rilevanti per i nostri conti alla rovescia (nome, descrizione e un segnaposto data).


Ogni volta che facciamo clic sul pulsante "Aggiungi conto alla rovescia" in alto a destra, viene aggiunto il nostro conto alla rovescia personalizzato

Ogni volta che facciamo clic sul pulsante "Aggiungi conto alla rovescia" in alto a destra, viene aggiunto il nostro conto alla rovescia personalizzato

Versione mobile

Versione mobile

Cassetto globale

Il componente successivo è un Kirigami.GlobalDrawer. Si presenta come un menu di hamburger. Per impostazione predefinita si apre una barra laterale, che è particolarmente utile sui dispositivi mobili, poiché l'utente può semplicemente scorrere un lato dello schermo per aprirla. I cassetti globali sono utili per la navigazione e le azioni globali. Creeremo un semplice cassetto globale che include un pulsante «esci».

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

Qui inseriamo il nostro cassetto globale nella finestra dell'applicazione. La proprietà principale a cui dobbiamo prestare attenzione è GlobalDrawer.actions, che assume la forma di un array di componenti Kirigami.Action. Questa azione ha un'icona appropriata ed esegue la funzione Qt.quit() quando attivata, chiudendo l'applicazione.

Dato che per ora manteniamo semplice il nostro cassetto globale, stiamo impostando la proprietà GlobalDrawer.isMenu su "true". Questo visualizza il nostro cassetto globale come un normale menu dell'applicazione, occupando meno spazio rispetto al riquadro del cassetto globale predefinito.

Cassetto globale

Cassetto globale

Cassetto globale come menu

Cassetto globale come menu

Le azioni sono contestuali

I componenti di Kirigami sono progettati in modo tale che il luogo in cui inserisci le azioni di Kirigami sia rilevante. Come visto sopra, se aggiungi azioni a Kirigami.Page, Kirigami.ScrollablePage o qualsiasi altro componente derivato della pagina, verranno visualizzate sul lato destro dell'intestazione in modalità desktop e in basso in modalità mobile.

Allo stesso modo, se le azioni Kirigami vengono aggiunte a un Kirigami.GlobalDrawer, saranno visualizzate nel cassetto o nel menu risultante.

Altri esempi di azioni Kirigami visualizzate in modo diverso a seconda del componente principale sono:

Tra gli altri componenti Kirigami.

Il nostro programma finora

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
Layout, ListView e schede
Next
Aggiungere una finestra