Aldonante agojn

Lerni pli pri la Agoj de Kirigami helpos nin fari nian aplikaĵon pli utila.

Resumo

Ĝis nun, ni sukcesis konstrui simplan apon kiu povas montri kartojn. Tamen ni ankoraŭ ne havas manieron aldoni novajn kartojn al nia kartvido.

En ĉi tiu lernilo, ni rigardos Kirigami-agojn. Ĉi tiuj helpos nin aldoni interagadon al nia aplikaĵo en konsekvenca, rapida kaj alirebla maniero.

Agoj

Kirigami.Action enkapsuligas uzantinterfacon. Ni povas uzi ĉi tiujn por provizi niajn aplikojn per facile atingeblaj agoj, kiuj estas esencaj por ilia funkcieco.

Se vi antaŭe uzis Kirigami-apojn, vi certe interagis kun Kirigami-Agoj. En ĉi tiu bildo, ni povas vidi agojn dekstre de la paĝotitolo kun diversaj piktogramoj. Kirigami-Agoj povas esti montrataj en pluraj manieroj kaj povas fari diversajn aferojn.

Aldonante retronombradojn

Retronombrada programo estas sufiĉe senutila sen la kapablo aldoni retronombradojn. Ni kreu agon, kiu permesos al ni fari ĉi tion.

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

Ni metas nian Kirigami-Agon ene de nia ĉefa paĝo de niaj antaŭaj lerniloj. Se ni volus, ni povus aldoni pli da agoj al nia paĝo (kaj eĉ nesti agojn ene de agoj!). Kirigami.Action komponantoj estas uzataj kiel kontekstaj agoj ene de Kirigami-paĝoj. Ni fiksas ĝin specife al la actions.main propraĵo de nia Kirigami.Page : la objekto actions havas ecojn kiuj ebligas al ni agordi malsamajn. agoj en malsamaj pozicioj, sed ĉar nia ago "Aldoni kountdown" estas centra al nia UI, ni fiksas ĝin kiel la ĉefan agon de ĉi tiu paĝo.

La ecoj id kaj text devus esti konataj de antaŭaj lerniloj. Tamen, la heredita Action.icon devus esti interesa: ĝi estas objekto kun pluraj ecoj. lasante vin montri certajn piktogramojn por viaj agoj. Feliĉe, por uzi KDE-piktogramojn, ni nur devas provizi la nomproprecon por la piktograma propreco, icon.name.

Noto

Cuttlefish estas KDE-apliko, kiu ebligas al vi vidi ĉiujn piktogramojn, kiujn vi povas uzi por via aplikaĵo. Ĝi ofertas kelkajn utilajn funkciojn kiel antaŭrigardojn de ilia aspekto tra malsamaj instalitaj etosoj, antaŭrigardojn je malsamaj grandecoj kaj pli. Vi eble trovos ĝin utila ilo kiam vi decidas pri kiuj piktogramoj uzi en via aplikaĵo.

Multaj el la piktogramoj de KDE sekvas la specifon de FreeDesktop Icon Naming. Sekve, vi eble ankaŭ trovos utile konsulti la retejon de la projekto FreeDesktop, [kiu listigas ĉiujn inter-tablaj kongruaj piktogramnomoj](https://specifications.freedesktop.org/icon-naming-spec/icon-naming-spec-latest .html).

La onTriggered signaltraktilo estas la plej grava. Jen kion faros nia ago kiam ĝi estos uzata. Vi rimarkos, ke en nia ekzemplo ni uzas la metodon kountdownModel.append de la kountdownModel ni kreis en nia antaŭa lernilo. Ĉi tiu metodo permesas al ni aldoni novan elementon al nia listo-modelo. Ni provizas ĝin per objekto (indikita per buklaj krampoj {}) kiu havas la koncernajn ecojn por niaj retronombradoj (nomo, priskribo, kaj lokokupilon dato).

Ĉiufoje kiam ni alklakas nian butonon "Aldoni kountdown" supre dekstre, nia propra retronombrado estas aldonita

Ĉiea tirkesto

Ĉu vi rimarkis tiujn tri liniojn apud la paĝotitolo sur la antaŭa ekrankopio? Tio estas hamburgera menuo, kiu malfermas Kirigami.GlobalDrawer . Ĉieaj tirkestoj estas utilaj por ĉiea navigado kaj agoj: alivorte, tiuj aferoj, kiujn vi eble bezonos uzi tra via aplikaĵo. Ni kreos simplan ĉiean tirkeston, kiu inkluzivas butonon "ĉesi".

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

Ĉi tie ni metas nian ĉiean tirkeston ene de nia aplika fenestro. La ĉefa eco, kiun ni devas atenti, estas GlobalDrawer.actions , kiu prenas la formon de tabelo de Kirigami.Action komponantoj. Ĉi tiu ago havas taŭgan piktogramon kaj efektivigas la funkcion Qt.quit() kiam ĝi estas ekigita, fermante la aplikaĵon.

Ĉar ni nun simpligas nian ĉiean tirkeston, ni fiksas la proprecon GlobalDrawer.isMenu al true. Ĉi tio montras nian ĉiean tirkeston kiel normalan aplikaĵmenuon, okupante malpli da spaco ol la defaŭlta ĉiea kestofenestro.

Noto

La paĝo Agoj bazitaj komponantoj de ĉi tiuj dokumentoj provizas pliajn detalojn pri Kirigami-Agoj kaj kiel ili povas esti uzataj.

Nia aplikaĵo ĝis nun

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

Aranĝoj, ListViews kaj Kartoj

Kreante tegmentajn foliojn