Aldonante dialogon
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 dialogon.
Malfermante la dialogon
pageStack.initialPage: Kirigami.ScrollablePage {
// ...
actions: [
Kirigami.Action {
id: addAction
icon.name: "list-add"
text: i18nc("@action:button", "Add kountdown")
onTriggered: addDialog.open()
}
]
}First we edit the action from the previous tutorial: just a Kirigami.Action that triggers the dialog's open() function.
Retronombrado-aldonado de dialogoj
La nova komponanto, kiun ni aldonas, estas Kirigami.Dialogo. Dialogoj aperas en la centro de la fenestro kaj povas esti uzataj por provizi kromajn informojn rilatajn al la aktuala enhavo. Ili ne povas esti movitaj, sed ili adaptas sian propran grandecon al la fenestro.
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
// Formaranĝoj helpas vicigi kaj strukturi aranĝon kun pluraj enigaĵoj
Kirigami.FormLayout {
// Tekstaj kampoj permesas vin enigi tekston en maldika tekstujo
Controls.TextField {
id: nameField
// Disponigas etikedon alfiksitan al la tekstokampo
Kirigami.FormData.label: i18nc("@label:textbox", "Name*:")
// Kion fari post kiam enigo estas akceptita (t.e. premita Enigu) En ĉi tiu kazo, ĝi
// movas la fokuson al la sekva kampo
onAccepted: descriptionField.forceActiveFocus()
}
Controls.TextField {
id: descriptionField
Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
placeholderText: i18n("Optional")
// Denove, ĝi movas la fokuson al la sekva kampo
onAccepted: dateField.forceActiveFocus()
}
Controls.TextField {
id: dateField
Kirigami.FormData.label: i18nc("@label:textbox", "ISO Date*:")
// D signifas postulatan nombron inter 1-9, 9 signifas postulatan nombron inter 0-9
inputMask: "D999-99-99"
// Ĉi tie ni konfirmas la operacion same kiel klaki la OK butonon
onAccepted: addDialog.onAccepted()
}
Controls.Label {
text: "* = required fields"
}
}
// La dialoglogiko iras ĉi tie
}
// ...
}Dialogoj defaŭlte havas header kaj [footer](https://doc.qt .io/qt-6/qml-qtquick-controls-dialog.html#footer-prop), ambaŭ hereditaj de Controls.Dialog.
La kaplinio defaŭlte inkluzivas titolon kaj fermbutonon kiu povas esti malŝaltita per [showCloseButton] (docs:kirigami2;Dialog::showCloseButton). La piedlinio defaŭlte inkluzivas fermbutonon, kaj ĝi povas esti anstataŭita per standardButtons.
Ni unue starigis ĝin por montri butonon "Ok" kaj butonon "Nuligi", aldonu iom da kompletigo kaj aldonu racian preferredWidth. La preferata larĝo estas la defaŭlta atendata grandeco de la dialogo, kiu povas pliiĝi se necese. Ni povas uzi norman Kirigami.Unuoj kiujn ni revizitos poste.
Poste ni venas al Kirigami.FormLayout. Male al ColumnLayout, la aranĝo de ĝiaj infanaj komponantoj estas aŭtomata kaj centrita, kun laŭvolaj etikedoj. Kiel la nomo implicas, ĝi estas uzata por krei enigformularojn.
Ĉ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:
- Enigo por la nomo de nia retronombrado
- Enigo por la priskribo de nia retronombrado
- 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.
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 la formo.
Ni ankaŭ starigis proprecon nomitan inputMask sur la teksta kampo por nia dato. Agordi ĉi tion al D999-99-99 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.
Post kiam la uzantinterfaco por la dialogo estas farita, ni devas ŝanĝi kiel ĝi kondutas. Por tio ni bezonas tri aferojn:
- Montri la Ok-butonon nur kiam la postulataj kampoj estas plenigitaj
- Aldoni la enigajn informojn al la modelo
- Forigi la enigformularon
Kirigami.Dialog {
// ... Once the Kirigami.Dialog is initialized, we want to create a custom binding to only make
// the Ok button visible if the required text fields are filled. For this we use
// Kirigami.Dialog.standardButton(button):
Component.onCompleted: {
const button = standardButton(Kirigami.Dialog.Ok);
// () => estas JavaScript-sago-funkcio
button.enabled = Qt.binding( () => requiredFieldsFilled() );
}
onAccepted: {
// La ligado estas kreita, sed ni ankoraŭ devas igi ĝin neklakebla krom se la kampoj estas
// plenigitaj
if (!addDialog.requiredFieldsFilled()) return;
appendDataToModel();
clearFieldsAndClose();
}
}La unua afero, kiu devas esti farita, estas krei ligon inter la [enabled] de la OK butono (https://doc.qt.io/qt-6/qml-qtquick-controls-popup.html#enabled-prop) propreco kaj kontrolo ĉu la kampoj estas plenigitaj, kio ĉi-kaze devas esti farita per [Qt.binding()](https://doc.qt.io/qt-6/qtqml-syntax-propertybinding.html#creating- property-bindings-from-javascript) en JavaScript. Efektive, la linio:
button.enabled = Qt.binding( () => requiredFieldsFilled() );estas simila al la QML-ligoj, kiujn ni vidis ĝis nun, kiel en la sekva pseŭdokodo:
enabled: requiredFieldsFilled()La signala prizorganto, kiu ekigas la Ok-butonon, estas onAccepted. Ĝi restas malplena kaj sen fari ion se la postulataj kampoj estas plenigitaj; alie, ĝi aldonos la enigon al la modelo kaj malplenigos la dialogon por la venonta fojo, kiam ĝi estos malfermita.
Kirigami.Dialog {
// ... Ni kontrolas, ke la nomKampo ne estas malplena kaj ke la datKampo (kiu havas enigMaskon)
// estas tute plenigita
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();
}
}Por nia postulata nomkampo, ĉio, kion ni devas fari, estas kontroli ĉu la kampoteksto estas malplena ĉeno. Por la data kampo, ĉar ĝi havas enigmaskon, ni devas uzi acceptableInput anstataŭe, kiu nur fariĝas vera post kiam la tuta kampo estas plenigita kaj enhavas nur akcepteblajn signojn.
Tiam, la append() metodo de nia lista modelo kountdownModel aldonas JavaScript-objekton inkluzive de la proprecoj, kiujn ni disponigis.
Finfine, ni certigas forigi la tekstajn kampojn agordante iliajn text ecojn al malplena ĉeno, tiam close() ĝi.
Post kiam ni konservos niajn dosierojn kaj konstruos nian programon, ni povos aldoni niajn proprajn proprajn retronombradojn! Ni povas fari la lastan tuŝon por plibonigi la interfacon, nome forigi la falsan retronombradon, kiun ni havis en la antaŭaj lecionoj:
| |
Secondly now that we have an actual date to play around with, we can calculate the time until said date:
| |
And thirdly increase the window size so that we have more room for our new cards:
| |
Multe pli bela.
Nia aplikaĵo ĝis nun
| |
