Afegir un diàleg
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 diàleg.
Obrir el diàleg
pageStack.initialPage: Kirigami.ScrollablePage {
// ...
actions: [
Kirigami.Action {
id: addAction
icon.name: "list-add"
text: i18nc("@action:button", "Add kountdown")
onTriggered: addDialog.open()
}
]
}
Primer editarem l'acció de la guia d'aprenentatge anterior: només una Kirigami.Action que activi la funció open() del diàleg.
Diàlegs que afegeixen un compte enrere
El component nou que afegim és un Kirigami.Dialog . Els diàlegs apareixen al centre de la finestra i es poden utilitzar per a proporcionar informació addicional rellevant per al contingut actual. No es poden moure, però adapten la seva mida a la finestra.
Kirigami.ApplicationWindow {
// ...
Kirigami.Dialog {
id: addDialog
title: i18nc("@title:window", "Add kountdown")
standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
padding: Kirigami.Units.largeSpacing
preferredWidth: Kirigami.Units.gridUnit * 20
// Les disposicions de formulari ajuden a alinear i estructurar una disposició amb diverses
// entrades
Kirigami.FormLayout {
// Els camps de text permeten introduir text en un quadre de text fi
Controls.TextField {
id: nameField
// Proporciona una etiqueta adjuntada al camp de text
Kirigami.FormData.label: i18nc("@label:textbox", "Name*:")
// Què s'ha de fer després d'acceptar l'entrada (p. ex. es prem Retorn) En aquest
// cas, mou el focus al camp següent
onAccepted: descriptionField.forceActiveFocus()
}
Controls.TextField {
id: descriptionField
Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
placeholderText: i18n("Optional")
// De nou, mou el focus al camp següent
onAccepted: dateField.forceActiveFocus()
}
Controls.TextField {
id: dateField
Kirigami.FormData.label: i18nc("@label:textbox", "ISO Date*:")
// D significa un nombre necessari entre 1-9, 9 significa un nombre necessari entre
// 0-9
inputMask: "D999-99-99"
// Aquí confirmem l'operació igual que fer clic al botó D'acord
onAccepted: addDialog.onAccepted()
}
Controls.Label {
text: "* = required fields"
}
}
// La lògica del diàleg va aquí
}
// ...
}
De manera predeterminada, els diàlegs tenen una header (capçalera) i un footer (peu), tots dos heretats de Controls.Dialog .
La capçalera per defecte inclou un title (títol) i un botó de tancament que es pot desactivar amb showCloseButton . El peu predeterminat inclou un botó de tancament, i es pot anul·lar amb standardButtons.
Primer, l'establim per a mostrar un botó «Ok» i un botó «Cancel·la», afegir algun farciment i afegir una preferredWidth . L'amplada preferida és la mida esperada predeterminada del diàleg, que pot augmentar si cal. Podem utilitzar Kirigami.Units que tornarem a revisar més endavant.
Després arribem a un Kirigami.FormLayout . A diferència del ColumnLayout, la disposició dels seus components fills és automàtica i centrada, amb etiquetes opcionals. Com el nom indica, s'utilitza per crear formularis d'entrada.
Aquestes disposicions de formulari estan dissenyades per a funcionar amb diversos tipus d'entrada diferents, 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 , estem establint una propietat Kirigami.FormData.label que permet definir etiquetes per a ells. El formulari presentarà les etiquetes correctes a l'esquerra de cadascun d'aquests camps d'entrada de text.
Finalment, també estem establint la propietat onAccepted per a activar el mètode forceActiveFocus() del camp següent; això canviarà el camp actiu una vegada que l'usuari prem la tecla Retorn, millorant la usabilitat del formulari.
També hem establert una propietat anomenada inputMask en el camp de text per a la nostra data. Establint això a D999-99-9
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.
Un cop feta la interfície d'usuari del diàleg, hem de canviar com es comporta. Per a això necessitem tres coses:
- Mostrar el botó Ok només quan s'omplin els camps requerits
- Afegir la informació d'entrada al model
- Netejar el formulari d'entrada
Kirigami.Dialog {
// ...Un cop el Kirigami.Dialog està inicialitzat, volem crear una vinculació personalitzada per
// a només fer visible el botó Ok si s'omplen els camps de text requerits. Per a això utilitzem
// el Kirigami.Dialog.standardButton(button):
Component.onCompleted: {
const button = standardButton(Kirigami.Dialog.Ok);
// () => és una funció de fletxa del JavaScript
button.enabled = Qt.binding( () => requiredFieldsFilled() );
}
onAccepted: {
// Es crea el vincle, però encara cal fer-lo no clicable a menys que s'omplin els camps
if (!addDialog.requiredFieldsFilled()) return;
appendDataToModel();
clearFieldsAndClose();
}
}
El primer que s'ha de fer és crear una vinculació entre la propietat activada del botó OK i una comprovació de si els camps s'omplen, que en aquest cas s'ha de fer amb Qt.binding() en JavaScript. En efecte, la línia:
button.enabled = Qt.binding( () => requiredFieldsFilled() );
és similar a les vinculacions en QML que hem vist fins ara, com en el pseudocodi següent:
enabled: requiredFieldsFilled()
El gestor de senyal que activa el botó Ok és onAccepted. Es manté buit i sense fer res si s'omplen els camps requerits; en cas contrari, afegirà l'entrada al model i netejarà el diàleg per a la propera vegada que s'obri.
Kirigami.Dialog {
// ...Comprovem que el «nameField» no estigui buit i que el «dateField» (que té una «inputMask»)
// estigui completament omplert
function requiredFieldsFilled() {
return (nameField.text !== "" && dateField.acceptableInput);
}
function appendDataToModel() {
kountdownModel.append({
name: nameField.text,
description: descriptionField.text,
date: new Date(dateField.text)
});
}
function clearFieldsAndClose() {
nameField.text = ""
descriptionField.text = ""
dateField.text = ""
addDialog.close();
}
}
Per al nostre camp de nom requerit, tot el que hem de fer és comprovar si el text del camp és una cadena buida. Per al camp de data, com que té una màscara d'entrada, cal utilitzar acceptableInput en el seu lloc, el qual només serà cert una vegada que tot el camp s'ompli i només contingui caràcters acceptables.
Llavors, el mètode append() del nostre model de llista kountdownModel
afegeix un objecte JavaScript incloent-hi les propietats que hem proporcionat.
Per acabar, ens assegurem, de netejar els camps de text definint les propietats del seu text a una cadena buida, després fem un close() .
Un cop desem els fitxers i construïm el programa, podrem afegir els nostres propis comptes enrere personalitzats! Podem fer un últim toc per a millorar la interfície, és a dir, eliminar el compte enrere fictici que teníem a les lliçons anteriors:
|
|
En segon lloc, ara que tenim una data real amb la qual jugar, podem calcular el temps fins a aquesta data:
|
|
I en tercer lloc, augmentar la mida de la finestra perquè tinguem més espai per a les targetes noves:
|
|
Molt millor.
La nostra aplicació fins ara
Main.qml:
|
|