Kreante tegmentajn foliojn
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 tegmentan folion.
Retronombrado-aldono folio
La nova komponanto, kiun ni aldonas, estas Kirigami.OverlaySheet . Supermetitaj folioj ŝvebas super la enhavo de la fenestro kaj povas esti uzataj por diversaj celoj, kiel provizi ekstrajn informojn rilatajn al la nuna enhavo. Ili estas kiel ŝikaj ŝprucfenestroj, krom ili ne povas esti movitaj.
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,
// La metodo parse() analizas ĉenon kaj redonas la nombron da milisekundoj ekde
// januaro 1, 1970, 00:00:00 UTC.
date: Date.parse(dateField.text)
});
nameField.text = ""
descriptionField.text = ""
dateField.text = ""
addSheet.close();
}
}
}
}
Ni povas doni al tegmentaj folioj titolon. Ĉi tiuj estas agordita kun la header propreco. Ni provizis al nia Kirigami.Titolo enhavanta koncernan titolon: "Aldoni Kountdown".
Poste ni venas al Kirigami.FormLayout . Ĉi tio ebligas al ni facile krei respondajn enigformularojn, kiuj bonorde montras etikedojn por enigaĵoj kaj la enigaĵojn mem sur ambaŭ larĝekranaj ekranoj kaj pli mallarĝaj porteblaj aparatoj. Ĉ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. Ni ankaŭ metas anstataŭaĵan tekston ene de la kampoj kun la propreco TextField.placeholderText, kiu malaperos tuj kiam la uzanto komencas tajpi en la kampo. 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 nia formo.
Ni ankaŭ starigis proprecon nomitan inputMask sur la teksta kampo por nia dato. Agordi ĉi tion al "0000-00-00"
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. .
Ĉe la fino de nia formularo ni inkluzivas
Butonon
kiu aldonas nian novan retronombradon al la listomodelo. Ni starigis ĝian enabled proprecon al kondiĉa deklaro, kiu kontrolas ĉu la nomkampo estas malplena aŭ ne: se ĝi estas, la butono estas malŝaltita, kaj inverse. Kiam la butono estas ekigita, ĝi ekigas la metodon append de nia listmodelo kountdownModel
, aldonante JavaScript-objekton inkluzive de la propraĵoj, kiujn ni provizis. Ni ankaŭ certigas forigi la tekstajn kampojn agordante iliajn text ecojn al malplena ĉeno. Ni finfine nomas metodon sur nia superkovra folio,
close()
, kiu fermas ĝin.
Uzante nian folion
actions.main: Kirigami.Action {
id: addAction
icon.name: "list-add"
text: i18nc("@action:button", "Add kountdown")
onTriggered: addSheet.open()
}
Supermetitaj folioj havas du metodojn, open() kaj close() , kiuj kontrolas la malfermon kaj fermon. de ĉi tiu komponanto. En ĉi tiu kazo, ni agordis la folion por esti malfermita kiam ni ekigas nian agon. Post kiam ni konservos niajn dosierojn kaj konstruos nian programon, ni povos aldoni niajn proprajn proprajn retronombradojn!
Nia aplikaĵo ĝis nun
|
|