Ustvarjanje prekrivnih listov

Dojemanje delovanja prekrivnih listov.

Izdelava naše aplikacije uporabne

Imamo okno, kartice in akcije. Vendar moramo še vedno najti način vnosa imena, opisa in datuma po naši izbiri.

To lahko storimo tako, da ustvarimo novo stran, kjer postavimo zahtevane vhodne elemente. Vendar pa se zdi cela stran, namenjena zagotavljanju imena, opisa in datuma, nekoliko pretirana.

Namesto tega bomo uporabili prekrivni list.

Prekrivni list, ki se pojavi na sredini aplikacije kot pogovorno okno

List z dodajanjem odštevanja

Nova komponenta, ki jo dodamo, je Kirigami.OverlaySheet . Prekrivni listi se postavijo nad vsebino okna in jih je mogoče uporabiti za različne namene, kot je zagotavljanje dodatnih informacij pomembnih za trenutno vsebino. So kot dodatno prikazana pogovorna okna, le da jih ni mogoče premikati.

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,
                    // Metoda parse() razčleni niz in vrne število milisekund od 1. januarja 1970
                    // 00:00:00 UTC.
                    date: Date.parse(dateField.text)
                });
                nameField.text = ""
                descriptionField.text = ""
                dateField.text = ""
                addSheet.close();
            }
        }
    }
}

Prekrivnemu listu lahko damo glavo. Ti so nastavljeni z lastnostjo header . Našemu smo zagotovili naslov ' Kirigami.Heading z ustreznim naslovom: 'Add Kountdown'.

Potem pridemo do Kirigami.FormLayout . Ta nam omogoča enostavno ustvarjanje odzivnih vhodnih obrazcev, ki pravilno prikazujejo nalepke za vhode in vhode same na širokih zaslonih zaslonih in na ožjih mobilnih napravah. Te postavitve obrazcev so zasnovane tako, da delujejo z različnimi vrstami vnosov, čeprav se držimo preprostih vhodov Controls.Textfield , ki nam dajejo preprosta polja z besedilom za pisanje stvari.

Ustvarili smo elemente Textfield, ki delujejo kot:

  1. Vnos za ime našega odštevanja
  2. Vnos za opis našega odštevanja
  3. Vnos za datum, ki ga odštevamo proti vrednosti, ki jo je treba navesti v formatu 'YYYY-MM-DD'.

Znotraj vsake od teh elementov Controls.Textfield nastavljamo lastnost Kirigami.FormData.label , ki nam dovoli, da zanje določimo oznake. V obrazcu bodo predstavljene pravilne oznake za vsak od teh besedilnih vnosov. Nastavimo tudi mesto za besedilo, kjer znotraj polj nastavljamo lastnost TextField.placeholderText -- to besedilo bo izginilo takoj, ko uporabnik začne vnašati v to polje. Na koncu tudi nastavljamo lastnost onAccepted za proženje metode forceActiveFocus() na naslednjem polju; to bo preklopilo aktivno polje, ko uporabnik pritisne vnašalko ENTER, kar izboljša uporabnost našega obrazca.

Na besedilnem polju za naš datum smo zastavili tudi lastnost imenovano inputMask. Nastavitev tega na "0000-00-00"" uporabnikom preprečuje, da bi vnesli nekaj, kar bi lahko prekinilo funkcionalnost aplikacije (na primer besedilo), omejilo jih je le na vnos števk, ki jih lahko nato poskusimo razčleniti v predmet datuma.

Na koncu obrazca vključujemo gumb Button , ki dodaja novo odštevanje na seznam modela. Lastnost enabled smo nastavili na pogojno izjavo, ki preverja, ali je ime polje prazno ali ne: če je, je gumb onemogočen in obratno. Ko se gumb sproži, sproži metodo append našega seznama modela 'kountdownModel', doda predmet JavaScript, vključno z lastnostmi, ki smo jih zagotovili. Prav tako poskrbimo, da počisti besedilna polja tako, da svoje lastnosti text nastavite na prazen niz. Končno imenujemo metodo na našem preklopnem listu, close() , ki ga zapre.

Uporaba našega lista

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

Prekrivni listi imajo dve metodi open() in close() , ki nadzirata odpiranje in zapiranje te komponente. V tem primeru smo določili, da se bo list odprl, ko bomo sprožili naše dejanje. Ko bomo shranili svoje datoteke in zgradili naš program, bomo lahko dodali svoja prilagojena odštevanja!

Naša aplikacija do sedaj

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

Posnetek zaslona aplikacije s primerom štirih kartic