Crear fulls superposats
Fer que la nostra aplicació sigui útil
Tenim una finestra, tenim targetes i tenim accions. No obstant això, encara necessitem trobar alguna forma d'introduir un nom, una descripció i una data de la nostra elecció.
Una manera en què podríem fer això és creant una pàgina nova on col·loquem els elements d'introducció requerits. No obstant això, una pàgina sencera dedicada a proporcionar un nom, una descripció i una data sembla una mica excessiu.
En el seu lloc, utilitzarem un full superposat.
Full que afegeix un compte enrere
El component nou que afegim és un Kirigami.OverlaySheet . Els fulls superposats se situen sobre el contingut de la finestra i es poden utilitzar per a diversos propòsits, com proporcionar informació addicional rellevant per al contingut actual. Són una espècie de finestres emergents elegants, excepte que no es poden moure.
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,
// El mètode parse() analitza una cadena i retorna el nombre de mil·lisegons des
// de l'1 de gener de 1970, 00:00:00 UTC.
date: Date.parse(dateField.text)
});
nameField.text = ""
descriptionField.text = ""
dateField.text = ""
addSheet.close();
}
}
}
}
Podem donar-los una capçalera. Aquesta s'estableix amb la propietat header . N'hem proporcionat una amb la Kirigami.Heading contenint un títol rellevant: «Add Kountdown».
Després arribem a una Kirigami.FormLayout . Ens permet crear formularis d'entrada receptius amb facilitat, els quals mostren amb claredat les etiquetes de les entrades i les entrades en si mateixes tant en pantalles apaïsades com en dispositius mòbils més estrets. Aquestes disposicions de formulari estan dissenyades per a treballar amb una varietat de diferents tipus d'entrada, encara que ens cenyim a entrades senzilles Controls.Textfield que ens brinden quadres de text senzills per a escriure-hi.
Hem creat elements Textfield que actuen com:
- Entrada per al nom del nostre compte enrere
- Entrada per a la descripció del nostre compte enrere
- Entrada per a la data cap a la qual estem comptant cap enrere, la qual s'ha de proporcionar en el format
YYYY-MM-DD
.
Dins de cadascun d'aquests elements Controls.Textfield , hem configurat una propietat Kirigami.FormData.label que ens permet definir-los etiquetes. El formulari presentarà les etiquetes correctes per a cadascuna d'aquestes entrades de text. També hem establert el text del marcador de posició dins dels camps amb la propietat TextField.placeholderText, que desapareixerà tan aviat com l'usuari comenci a escriure en el camp. Finalment, també hem establert la propietat onAccepted per a activar el mètode forceActiveFocus() del camp següent. Això commutarà el camp actiu una vegada l'usuari premi la tecla Retorn, millorant la usabilitat del nostre formulari.
També hem establert una propietat anomenada inputMask en el camp de text per a la nostra data. Establint això a "0000-00-00"
evitarà que els usuaris introdueixin alguna cosa que pugui trencar la funcionalitat de l'aplicació (com ara text), restringint-lo a només la introducció de dígits, després podrem intentar analitzar-ho en un objecte de data.
Al final del nostre formulari, incloem un
botó
que afegeix el nostre compte enrere nou al model de llista. Hem establert la propietat enabled en una declaració condicional que comprova si el camp de nom està buit o no: si ho està, el botó estarà inhabilitat i viceversa. Quan s'activi el botó, s'activarà el mètode append del nostre model de llista kountdownModel
, afegint un objecte de JavaScript que inclogui les propietats que hem proporcionat. També ens assegurarem d'esborrar els camps de text establint les seves propietats text a una cadena buida. Finalment cridarem a un mètode en el nostre full superposat,
close()
, que el tancarà.
Usar el nostre full
actions.main: Kirigami.Action {
id: addAction
icon.name: "list-add"
text: i18nc("@action:button", "Add kountdown")
onTriggered: addSheet.open()
}
Els fulls superposats tenen dos mètodes, open() i close() , els quals controlen l'obertura i el tancament d'aquest component. En aquest cas, hem establert el full perquè s'obri quan activem la nostra acció. Una vegada que desem els nostres fitxers i creem el nostre programa, podrem afegir els nostres propis comptes enrere personalitzats!
La nostra aplicació fins ara
|
|