Afegir accions
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 Kirigami.Action 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 en un mòbil
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 imbricar 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
Kirigami.Page
: 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 heretada Action.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
.
Nota
El Cuttlefish és una aplicació KDE que permet veure totes les icones que podreu utilitzar per a la vostra aplicació. Ofereix una sèrie de característiques útils: com vistes prèvies de la seva aparença en els diferents temes instal·lats, vistes prèvies en mides diferents i més. Potser us resultarà una eina útil a l'hora de decidir quines icones emprar en la vostra aplicació.
Moltes de les icones del KDE segueixen l'especificació d'anomenat d'icones de FreeDesktop. Per tant, també pot resultar útil consultar el lloc web del projecte FreeDesktop, el qual llista tots els noms d'icones compatibles amb tots els escriptoris.
El controlador de senyals
onTriggered
és el 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 (indicat per les claus {}
) que té les propietats rellevants per als nostres comptes enrere (name
, description
i una date
de 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.

Versió mòbil
Calaix global
Heu vist aquelles tres línies al costat del títol de la pàgina en la captura de pantalla anterior? És un menú d'hamburguesa que obre un Kirigami.GlobalDrawer . 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 parar atenció és GlobalDrawer.actions , que pren la forma d'una matriu de components Kirigami.Action . Aquesta acció té una icona adequada i executa la funció Qt.quit() quan s'activa, tancant l'aplicació.
Atès que, per ara, mantenim senzill el nostre calaix global, establim la propietat
GlobalDrawer.isMenu
a true
. Això mostrarà el nostre calaix global com un menú normal d'aplicació, ocupant menys espai que la subfinestra predeterminada del calaix global.

Calaix global

Calaix global com a menú
Nota
La pàgina components basats en Actions d'aquesta documentació, proporciona més detalls sobre les accions del Kirigami i com es poden utilitzar.La nostra aplicació fins ara
|
|