Kreante tegmentajn foliojn

Ektrakti kun supermetitaj folioj.

Farante nian apon utila

Ni havas fenestron, ni havas kartojn, kaj ni havas agojn. Tamen, ni ankoraŭ bezonas trovi ian manieron enigi nomon, priskribon kaj daton de nia elekto.

Unu maniero, kiel ni povus fari tion, estas kreante novan paĝon, kie ni metas la postulatajn enigelementojn. Tamen tuta paĝo dediĉita al liverado de nomo, priskribo kaj dato ŝajnas iom troa.

Anstataŭe, ni uzos tegmentan folion.

Supermetu folion aperanta meze de la aplikaĵo kiel dialogfenestro

Retronombrado-aldono folio

La nova komponanto, kiun ni aldonas, estas Kirigami.OverlaySheet . Supermetitaj folioj ŝvebas super la enhavo de la fenestro kaj povas esti uzataj por diversaj celoj, kiel provizi ekstrajn informojn rilatajn al la nuna enhavo. Ili estas kiel ŝikaj ŝprucfenestroj, krom ili ne povas esti movitaj.

Kirigami.OverlaySheet {
    id: addSheet
    header: Kirigami.Heading {
        text: i18nc("@title:window", "Add kountdown")
    }
    Kirigami.FormLayout {
        Controls.TextField {
            id: nameField
            Kirigami.FormData.label: i18nc("@label:textbox", "Name:")
            placeholderText: i18n("Event name (required)")
            onAccepted: descriptionField.forceActiveFocus()
        }
        Controls.TextField {
            id: descriptionField
            Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
            placeholderText: i18n("Optional")
            onAccepted: dateField.forceActiveFocus()
        }
        Controls.TextField {
            id: dateField
            Kirigami.FormData.label: i18nc("@label:textbox", "Date:")
            placeholderText: i18n("YYYY-MM-DD")
            inputMask: "0000-00-00"
        }
        Controls.Button {
            id: doneButton
            Layout.fillWidth: true
            text: i18nc("@action:button", "Done")
            enabled: nameField.text.length > 0
            onClicked: {
                kountdownModel.append({
                    name: nameField.text,
                    description: descriptionField.text,
                    // La metodo parse() analizas ĉenon kaj redonas la nombron da milisekundoj ekde
                    // januaro 1, 1970, 00:00:00 UTC.
                    date: Date.parse(dateField.text)
                });
                nameField.text = ""
                descriptionField.text = ""
                dateField.text = ""
                addSheet.close();
            }
        }
    }
}

Ni povas doni al tegmentaj folioj titolon. Ĉi tiuj estas agordita kun la header propreco. Ni provizis al nia Kirigami.Titolo enhavanta koncernan titolon: "Aldoni Kountdown".

Poste ni venas al Kirigami.FormLayout . Ĉi tio ebligas al ni facile krei respondajn enigformularojn, kiuj bonorde montras etikedojn por enigaĵoj kaj la enigaĵojn mem sur ambaŭ larĝekranaj ekranoj kaj pli mallarĝaj porteblaj aparatoj. Ĉi tiuj formularaj aranĝoj estas dezajnitaj por funkcii kun diversaj malsamaj enigspecoj, kvankam ni restas al simplaj Controls.Textfield enigaĵoj, kiuj donas al ni simplajn tekstskatolojn por skribi aferojn.

Ni kreis Textfield-elementojn kiuj funkcias kiel:

  1. Enigo por la nomo de nia retronombrado
  2. Enigo por la priskribo de nia retronombrado
  3. Enigo por la dato al kiu ni kalkulas malsupren, kiu devas esti provizita en formato YYYY-MM-DD.

Ene de ĉiu el ĉi tiuj Controls.Textfield elementoj, ni fiksas Kirigami.FormData.label proprecon kiu ebligas al ni difini etikedojn por ilin. La formularo prezentos la ĝustajn etikedojn maldekstre de ĉiu el ĉi tiuj tekstaj enigokampoj. Ni ankaŭ metas anstataŭaĵan tekston ene de la kampoj kun la propreco TextField.placeholderText, kiu malaperos tuj kiam la uzanto komencas tajpi en la kampo. Fine, ni ankaŭ fiksas la onAccepted proprecon por ekigi la [forceActiveFocus()](https:/ /doc.qt.io/qt-6/qml-qtquick-item.html#forceActiveFocus-method) metodo de la sekva kampo; ĉi tio ŝanĝos la aktivan kampon post kiam la uzanto trafos la ENTER-klavon, plibonigante la uzeblecon de nia formo.

Ni ankaŭ starigis proprecon nomitan inputMask sur la teksta kampo por nia dato. Agordi ĉi tion al "0000-00-00" malhelpas uzantojn enigi ion, kio povus rompi la funkciecon de la aplikaĵo (kiel teksto), limigante ilin nur enigi ciferojn, kiujn ni tiam povas provi analizi en datan objekton. .

Ĉe la fino de nia formularo ni inkluzivas Butonon kiu aldonas nian novan retronombradon al la listomodelo. Ni starigis ĝian enabled proprecon al kondiĉa deklaro, kiu kontrolas ĉu la nomkampo estas malplena aŭ ne: se ĝi estas, la butono estas malŝaltita, kaj inverse. Kiam la butono estas ekigita, ĝi ekigas la metodon append de nia listmodelo kountdownModel, aldonante JavaScript-objekton inkluzive de la propraĵoj, kiujn ni provizis. Ni ankaŭ certigas forigi la tekstajn kampojn agordante iliajn text ecojn al malplena ĉeno. Ni finfine nomas metodon sur nia superkovra folio, close() , kiu fermas ĝin.

Uzante nian folion

actions.main: Kirigami.Action {
    id: addAction
    icon.name: "list-add"
    text: i18nc("@action:button", "Add kountdown")
    onTriggered: addSheet.open()
}

Supermetitaj folioj havas du metodojn, open() kaj close() , kiuj kontrolas la malfermon kaj fermon. de ĉi tiu komponanto. En ĉi tiu kazo, ni agordis la folion por esti malfermita kiam ni ekigas nian agon. Post kiam ni konservos niajn dosierojn kaj konstruos nian programon, ni povos aldoni niajn proprajn proprajn retronombradojn!

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
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")

    globalDrawer: Kirigami.GlobalDrawer {
        isMenu: true
        actions: [
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "gtk-quit"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }

    ListModel {
        id: kountdownModel
    }

    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: i18n("%1 days", Math.round((date-Date.now())/86400000))
                    }

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

    // Overlay sheets appear over a part of the window
    Kirigami.OverlaySheet {
        id: addSheet
        header: Kirigami.Heading {
            text: i18nc("@title:window", "Add kountdown")
        }
        // Form layouts help align and structure a layout with several inputs
        Kirigami.FormLayout {
            // Textfields let you input text in a thin textbox
            Controls.TextField {
                id: nameField
                // Provides label attached to the textfield
                Kirigami.FormData.label: i18nc("@label:textbox", "Name:")
                // Placeholder text is visible before you enter anything
                placeholderText: i18n("Event name (required)")
                // What to do after input is accepted (i.e. pressed enter)
                // In this case, it moves the focus to the next field
                onAccepted: descriptionField.forceActiveFocus()
            }
            Controls.TextField {
                id: descriptionField
                Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
                placeholderText: i18n("Optional")
                onAccepted: dateField.forceActiveFocus()
            }
            Controls.TextField {
                id: dateField
                Kirigami.FormData.label: i18nc("@label:textbox", "Date:")
                placeholderText: i18n("YYYY-MM-DD")
                inputMask: "0000-00-00"
            }
            Controls.Button {
                id: doneButton
                Layout.fillWidth: true
                text: i18nc("@action:button", "Done")
                // Button is only enabled if the user has entered something into the nameField
                enabled: nameField.text.length > 0
                onClicked: {
                    // Add a listelement to the kountdownModel ListModel
                    kountdownModel.append({
                        name: nameField.text,
                        description: descriptionField.text,
                        date: Date.parse(dateField.text)
                    });
                    nameField.text = ""
                    descriptionField.text = ""
                    dateField.text = ""
                    addSheet.close();
                }
            }
        }
    }

    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: addSheet.open()
        }

        Kirigami.CardsListView {
            id: layout
            model: kountdownModel
            delegate: kountdownDelegate
        }
    }
}

Ekrankopio de la aplikaĵo kun kvar ekzemplokartoj