Ustvarjanje 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.
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:
- Vnos za ime našega odštevanja
- Vnos za opis našega odštevanja
- 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
|
|