Separar código difícil de manejar en diferentes archivos y adjuntar señales a los componentes.
Pero ¿por qué?
Por primera vez, separaremos algunos de nuestros componentes en sus propios archivos QML. Si seguimos añadiendo cosas a main.qml, rápidamente se volverá difícil saber qué hace cada cosa, y corremos el riesgo de enturbiar nuestro código.
Primero necesitamos añadir los nuevos archivos a nuestro resources.qrc que creamos en la primera parte de este tutorial.
Necesitaremos encontrar algún modo de usar los nuevos archivos en main.qml. Afortunadamente, todo lo que tenemos que hacer es incluir una declaración de dichos componentes en nuestro main.qml del siguiente modo:
AddEditSheet{id: addEditSheet}
Extendiendo nuestra hoja de añadir a una hoja de añadir/editar
Mientras que en el último tutorial hicimos que nuestro botón para añadir una cuenta atrás hiciera algo, el botón de edición de nuestras tarjetas de cuenta atrás sigue inactivo. También creamos una hoja para añadir que ahora podríamos reutilizar para que también sirva como una hoja de edición... Pero antes de esto necesitamos añadir un par de cosas adicionales a nuestro main.qml.
importQtQuick2.15importQtQuick.Controls2.15asControlsimportQtQuick.Layouts1.15importorg.kde.kirigami2.20asKirigamiKirigami.ApplicationWindow{id: roottitle:i18nc("@title:window","Day Kountdown")globalDrawer:Kirigami.GlobalDrawer{isMenu:trueactions:[Kirigami.Action{text:i18n("Quit")icon.name:"gtk-quit"shortcut:StandardKey.QuitonTriggered:Qt.quit()}]}ListModel{id: kountdownModel}// Fetches item from addEditSheet.qml and does action on signal
AddEditSheet{id: addEditSheetonAdded:kountdownModel.append({"name":name,"description":description,"date":Date.parse(kdate)});onEdited:kountdownModel.set(index,{"name":name,"description":description,"date":Date.parse(kdate)});onRemoved:kountdownModel.remove(index,1)}// Function called by 'edit' button on card and by 'add'-Action
functionopenPopulatedSheet(mode,index=-1,listName="",listDesc="",listDate=""){addEditSheet.mode=modeaddEditSheet.index=index;addEditSheet.name=listNameaddEditSheet.description=listDescaddEditSheet.kdate=listDateaddEditSheet.open()}pageStack.initialPage:Kirigami.ScrollablePage{title:i18nc("@title","Kountdown")// Kirigami.Action encapsulates a UI action. Inherits from Controls.Action
actions.main:Kirigami.Action{id: addAction// Name of icon associated with the action
icon.name:"list-add"// Action text, i18n function returns translated string
text:i18nc("@action:button","Add kountdown")// What to do when triggering the action
onTriggered:openPopulatedSheet("add")}Kirigami.CardsListView{id: layoutmodel:kountdownModeldelegate:KountdownDelegate{}}}}
Los cambios claves que hemos realizado implican la adición de nuestra definición de componente AddEditSheet (y KountdownDelegate más abajo) y una nueva función llamada openPopulatedSheet().
onAdded and onEdited are signal handlers. Just like onTriggered is called when we click an action, we can use handlers that respond to our custom signals.
AddEditSheet.qml
Looking at our new AddEditSheet.qml—our repurposed adding sheet—we can see how these signals work:
importQtQuick2.15importQtQuick.Controls2.15asControlsimportQtQuick.Layouts1.15importorg.kde.kirigami2.20asKirigami// Overlay sheets appear over a part of the window
Kirigami.OverlaySheet{id: addEditSheet// Sheet mode
propertystringmode:"add"propertyintindex:-1propertyaliasname:nameField.textpropertyaliasdescription:descriptionField.textpropertyaliaskdate:dateField.text// Signals can be read and certain actions performed when these happen
signaladded(stringname,stringdescription,varkdate)signaledited(intindex,stringname,stringdescription,varkdate)signalremoved(intindex)header:Kirigami.Heading{// i18nc is useful for adding context for translators
text:mode==="add"?i18nc("@title:window","Add kountdown"):i18nc("@title:window","Edit kountdown")}// Form layouts help align and structure a layout with several inputs
Kirigami.FormLayout{// Textfields let you input text in a thin textbox
Controls.TextField{id: nameField// Provides label attached to the textfield
Kirigami.FormData.label:i18nc("@label:textbox","Name:")// Placeholder text is visible before you enter anything
placeholderText:i18n("Event name (required)")// What to do after input is accepted (i.e. pressed enter)
// In this case, it moves the focus to the next field
onAccepted:descriptionField.forceActiveFocus()}Controls.TextField{id: descriptionFieldKirigami.FormData.label:i18nc("@label:textbox","Description:")placeholderText:i18n("Optional")onAccepted:dateField.forceActiveFocus()}Controls.TextField{id: dateFieldKirigami.FormData.label:i18nc("@label:textbox","Date:")inputMask:"0000-00-00"placeholderText:i18n("YYYY-MM-DD")}// This is a button.
Controls.Button{id: deleteButtonLayout.fillWidth:truetext:i18nc("@action:button","Delete")visible:mode==="edit"onClicked:{addEditSheet.removed(addEditSheet.index)close();}}Controls.Button{id: doneButtonLayout.fillWidth:truetext:i18nc("@action:button","Done")// Button is only enabled if the user has entered something into the nameField
enabled:nameField.text.length>0onClicked:{// Add a listelement to the kountdownModel ListModel
if(mode==="add"){addEditSheet.added(nameField.text,descriptionField.text,dateField.text);}else{addEditSheet.edited(index,nameField.text,descriptionField.text,dateField.text);}close();}}}}
Las señales invocan a sus controladores cuando se las llama. En este caso, hemos creado dos señales, added y edited, que podemos invocar con diferentes resultados, y a las que podemos adjuntar información sobre la cuenta atrás que estamos añadiendo o creando. Una cosa interesante de las señales es que exponen las variables definidas en ellas a las funciones que las están escuchando, por lo que podemos simplemente llamar a esos nombres de variables en nuestros controladores onEdited y onAdded de main.qml. Nuestras señales son invocadas por el botón "Terminado" dependiendo del contenido de la propiedad mode, definida en la parte superior de nuestra AddEditSheet.
La propiedad mode también controla varias cosas más: principalmente a qué está asignado el título de nuestra hoja y qué texto se incluirá en nuestros campos de texto. Sin embargo, de forma predeterminada, nuestra propiedad mode está asignada para añadir...
Lo que nos lleva de vuelta a main.qml y a nuestra nueva función openPopulatedSheet(). Es posible que haya notado que esto es lo que se llama ahora cuando se dispara la acción para añadir una cuenta atrás. Esta función tiene varios argumentos de entrada que se han proporcionado con valores por defecto. Esto resulta de utilidad cuando solo queremos añadir una nueva cuenta atrás, porque podemos hacer que la función concisa llame a openPopulatedSheet("add"). Y, lo más importante, esta función asigna todas las propiedades relevantes en AddEditSheet.
mode cambia la hoja de añadir/editar dependiendo de si este argumento está definido como "añadir" o como "editar"
index es necesario para que cuando guardemos nuestra cuenta atrás editada se modifique la correcta.
listName, listDesc y listDate son los detalles relevantes de la cuenta atrás que necesita poner en los campos de la hoja
Por supuesto, para usar nuestra hoja para cualquier cosa además de añadir cuentas atrás, primero debemos hacer que el botón de edición en nuestras tarjetas funcione. Pero si mira nuestro
Kirigami.CardsListView
en main.qml...
importQtQuick2.15importQtQuick.Controls2.15asControlsimportQtQuick.Layouts1.15importorg.kde.kirigami2.20asKirigamiKirigami.AbstractCard{id: kountdownDelegatecontentItem:Item{implicitWidth:delegateLayout.implicitWidthimplicitHeight:delegateLayout.implicitHeightGridLayout{id: delegateLayoutanchors{left:parent.lefttop:parent.topright:parent.right}rowSpacing:Kirigami.Units.largeSpacingcolumnSpacing:Kirigami.Units.largeSpacingcolumns:root.wideScreen?4:2Kirigami.Heading{Layout.fillHeight:truelevel:1text:i18n("%1 days",Math.round((date-Date.now())/86400000))}ColumnLayout{Kirigami.Heading{Layout.fillWidth:truelevel:2text:name}Kirigami.Separator{Layout.fillWidth:truevisible:description.length>0}Controls.Label{Layout.fillWidth:truewrapMode:Text.WordWraptext:descriptionvisible:description.length>0}}Controls.Button{Layout.alignment:Qt.AlignRight// Column spanning within grid layout (vertically in this case)
Layout.columnSpan:2text:i18n("Edit")onClicked:openPopulatedSheet("edit",index,name,description,newDate(date).toISOString().slice(0,10))}}}}
La propiedad
onClicked
del botón «Editar» de nuestras tarjetas llama ahora a la función openPopulatedSheet(), con las propiedades del elemento de la lista extraída de la tarjeta definidas como argumentos para esta función. Con ellos, la hoja se puede rellenar con el texto correcto.
Con eso, ¡tenemos una hoja completamente funcional con la que podemos añadir y editar nuestras cuentas atrás!