Skip to main content
Skip to content
Upraviť túto stránku See source code Vytvoriť problém s dokumentáciou Formatting guidelines Style guidelines

Akcie

Ďalšie informácie o akciách Kirigami nám pomôžu urobiť našu aplikáciu užitočnejšou.

Rekapitulácia

Doteraz sme vytvorili jednoduchú aplikáciu, ktorá dokáže zobrazovať karty. Momentálne však neexistuje spôsob, ako by používateľ mohol pridať nové karty do zobrazenia kariet.

V tomto tutoriáli sa pozrieme na akcie Kirigami. Pomôžu nám pridať interaktivitu do našej aplikácie konzistentným, rýchlym a prístupným spôsobom.

Akcie

Kirigami.Action zapuzdruje akciu používateľského rozhrania. Môžeme ich použiť na poskytnutie ľahko dostupných akcií, ktoré sú nevyhnutné pre funkčnosť našich aplikácií.

Ak ste už predtým používali aplikácie Kirigami, určite ste interagovali s akciami Kirigami. Na tomto obrázku vidíme akcie napravo od názvu stránky s rôznymi ikonami. Akcie Kirigami sa dajú zobraziť niekoľkými spôsobmi a môžu robiť širokú škálu vecí.

Akcie

Aplikácia na odpočítavanie je celkom zbytočná bez možnosti pridávať odpočítavania. Vytvorme akciu, ktorá nám to umožní.

pageStack.initialPage: Kirigami.ScrollablePage {
    // Ďalšie vlastnosti stránky...
    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
            })
        }
    ]
    // ...
}

Umiestňujeme našu Kirigami.Action do hlavnej stránky z predchádzajúcich tutoriálov. Keby sme chceli, mohli by sme pridať viac akcií na našu stránku (a dokonca vnoriť akcie do akcií!).

Zátvorky [] použité vyššie sú podobné poliam JavaScript, čo znamená, že im môžete odovzdať jednu alebo viac vecí, oddelených čiarkou:

// Všeobecné pole komponentov v JavaScripte:
variable: [ component1, component2 ]
// Odovzdanie poľa akcií Kirigami do QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]

Vlastnosti id a text by mali byť známe z predchádzajúcich tutoriálov. Avšak zdedená vlastnosť Action.icon by mala byť zaujímavá: je to objekt s niekoľkými vlastnosťami, ktoré vám umožňujú zobrazovať určité ikony pre vaše akcie. Našťastie, na použitie ikon KDE stačí poskytnúť vlastnosť name pre vlastnosť icon, icon.name.

Obsluha signálu onTriggered je najdôležitejšia. Toto je to, čo naša akcia vykoná pri použití. Všimnete si, že v našom príklade používame metódu kountdownModel.append modelu kountdownModel, ktorý sme vytvorili v predchádzajúcom tutoriáli. Táto metóda nám umožňuje pripojiť nový prvok do nášho modelu zoznamu. Poskytujeme jej objekt (označený zloženými zátvorkami {}), ktorý má príslušné vlastnosti pre naše odpočítavania (name, description a zástupný date).


Zakaždým, keď klikneme na tlačidlo "Add kountdown" vpravo hore, pridá sa naše vlastné odpočítavanie

Zakaždým, keď klikneme na tlačidlo "Add kountdown" vpravo hore, pridá sa naše vlastné odpočítavanie

Mobilná verzia

Mobilná verzia

Zásuvky

Ďalším komponentom je Kirigami.GlobalDrawer. Zobrazuje sa ako hamburgerové menu. Predvolene otvára bočný panel, čo je obzvlášť užitočné na mobile, pretože používateľ môže jednoducho potiahnutím na strane obrazovky otvoriť ho. Globálne zásuvky sú užitočné pre globálnu navigáciu a akcie. Vytvoríme jednoduchú globálnu zásuvku, ktorá obsahuje tlačidlo na ukončenie.

Kirigami.ApplicationWindow {
    id: root
    // Ďalšie vlastnosti okna...
    globalDrawer: Kirigami.GlobalDrawer {
        isMenu: true
        actions: [
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
    // ...
}

Tu umiestňujeme našu globálnu zásuvku do okna aplikácie. Hlavnou vlastnosťou, na ktorú musíme dávať pozor, je GlobalDrawer.actions, ktorá má formu poľa komponentov Kirigami.Action. Táto akcia má príslušnú ikonu a pri spustení vykoná funkciu Qt.quit(), čím zatvorí aplikáciu.

Keďže našu globálnu zásuvku zatiaľ udržiavame jednoduchú, nastavujeme vlastnosť GlobalDrawer.isMenu na true. Toto zobrazí našu globálnu zásuvku ako normálne menu aplikácie, zaberajúc menej miesta ako predvolený panel globálnej zásuvky.

Zásuvky

Zásuvky

Zásuvky

Zásuvky

Komponenty

Komponenty Kirigami sú navrhnuté takým spôsobom, že miesto, kde umiestnite akcie Kirigami, je relevantné. Ako je vidieť vyššie, ak pridáte akcie na Kirigami.Page, Kirigami.ScrollablePage alebo akýkoľvek iný odvodený komponent Page, zobrazia sa na pravej strane hlavičky v desktopovom režime a na spodku v mobilnom režime.

Podobne, ak sa akcie Kirigami pridajú do Kirigami.GlobalDrawer, zobrazia sa vo výslednej zásuvke alebo menu.

Ďalšie príklady akcií Kirigami, ktoré sa zobrazujú odlišne v závislosti od rodičovského komponentu:

Kirigami

Naša aplikácia doteraz

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
Rozloženia, ListView a karty
Next
Akcie