Afegir accions

Aprendre més sobre les Kirigami Actions ens ajudarà a fer que la nostra aplicació sigui més útil.

Recapitulació

Fins ara, hem aconseguit crear una aplicació senzilla que pot mostrar targetes. No obstant això, encara no tenim una forma d’afegir targetes noves a la nostra vista de targetes.

En aquesta guia d’aprenentatge, veurem les accions de Kirigami. Aquestes ens ajudaran a afegir interactivitat a la nostra aplicació d’una manera coherent, ràpida i accessible.

Accions

Una acció de Kirigami encapsula una acció de la interfície d’usuari. Podem utilitzar-les per a proporcionar a les nostres aplicacions accions de fàcil accés que són essencials per a la seva funcionalitat.

Accions de la pàgina a l’escriptori.

Accions de la pàgina a l’escriptori.

Si heu emprat abans les aplicacions escrites en Kirigami, certament heu interactuat amb les Kirigami Actions. En aquesta imatge, podem veure les accions a la dreta del títol de la pàgina amb diverses icones. Les Kirigami Actions es poden mostrar de diverses maneres i poden realitzar una àmplia varietat de coses.

Afegir comptes enrere

Una aplicació de compte enrere és força inútil sense la capacitat d’afegir-ne. Crearem una acció que ens permeti fer-ho.

pageStack.initialPage: Kirigami.ScrollablePage {

	...

	actions.main: Kirigami.Action {
		id: addAction
		icon.name: "list-add"
		text: i18nc("@action:button", "Add kountdown")
		onTriggered: kountdownModel.append({
			name: "Kirigami Action added card!",
			description: "Congratulations, your Kirigami Action works!",
			date: 1000
		})
	}
		
	... 

}

Estem col·locant la nostra acció de Kirigami dins de la nostra pàgina principal de les nostres guies d’aprenentatge anteriors. Si volguéssim, podríem afegir més accions a la nostra pàgina. (Fins i tot niar les accions dins de les accions!) Els components Kirigami.Action s’utilitzen com a accions contextuals dins les pàgines de Kirigami. Ho estem configurant específicament per a la propietat actions.main de la pàgina: l’objecte actions té propietats que ens permeten establir accions diferents en posicions diferents, però atès que la nostra acció «Add kountdown» és fonamental per a la nostra interfície d’usuari, l’establirem com l’acció principal d’aquesta pàgina.

Les propietats id i text haurien de ser familiars de guies d’aprenentatge anteriors. No obstant això, la propietat nova icon hauria de ser interessant: és un objecte amb diverses propietats que permet mostrar certes icones per a les vostres accions. Afortunadament, per a utilitzar les icones del KDE, tot el que hem de fer és proporcionar el nom de la propietat per a la propietat d’icona, icon.name.

La propietat onTriggered és la més important. És el que farà la nostra acció quan s’utilitzi. Notareu que en el nostre exemple fem servir el mètode kountdownModel.append del kountdownModel que hem creat en la nostra guia d’aprenentatge anterior. Aquest mètode ens permet afegir un element nou al nostre model de llista. Proporcionem un objecte que té les propietats rellevants per als nostres comptes enrere (nom, descripció i una data per al marcador de posició).

Cada vegada que fem clic sobre el nostre botó «Add kountdown» que hi ha a la part superior dreta, s’afegirà el nostre compte enrere personalitzat.

Cada vegada que fem clic sobre el nostre botó «Add kountdown» que hi ha a la part superior dreta, s’afegirà el nostre compte enrere personalitzat.

Calaix global

Cal tenir en compte aquestes tres línies al costat del títol de la pàgina en la captura de pantalla anterior? És un calaix global. Els calaixos globals són útils per a la navegació i les accions globals: en altres paraules, aquelles coses que podríeu necessitar emprar a través de tota la vostra aplicació. Crearem un calaix global senzill que inclou un botó per a sortir.

Kirigami.ApplicationWindow {
	id: root

		...

	globalDrawer: Kirigami.GlobalDrawer {
		isMenu: true
		actions: [
			Kirigami.Action {
				text: i18n("Quit")
				icon.name: "gtk-quit"
				shortcut: StandardKey.Quit
				onTriggered: Qt.quit()
			}
		]
	}

	...
	
}

Aquí, col·locarem el nostre calaix global dins de la finestra de la nostra aplicació. La propietat principal a la qual hem de prestar atenció són les accions, les quals prenen la forma d’una matriu de components Kirigami.Action. Aquesta acció té una icona adequada i activa la funció Qt.quit(), tancant l’aplicació.

Atès que, per ara, mantenim senzill el nostre calaix global, establim la propietat isMenu a cert. Això mostrarà el nostre calaix global com un menú normal d’aplicació, ocupant menys espai que la subfinestra predeterminada del calaix global.