Toevoegen van acties
Samenvattend
Tot nu toe hebben we have een eenvoudige toepassing kunnen maken die kaarten kan tonen. We hebben echter nog geen manier om nieuwe kaarten aan onze kaartweergave toe te voegen.
In deze inleiding zullen we kijken naar acties van Kirigami. Deze zullen ons helpen interactiviteit toe te voegen aan onze toepassing op een consistente, snelle en toegankelijke manier.
Acties
Een Kirigami.Action omvat geheel een actie in de gebruikersinterface. We kunnen deze gebruiken om onze toepassingen te voorzien van gemakkelijk te bereiken acties die essentieel zijn voor hun functionaliteit.

Pagina-acties op het bureaublad

Pagina-acties op een mobiel
Als u Kirigami toepassingen eerder hebt gebruikt, hebt u zeker samengewerkt met acties van Kirigami. In deze afbeelding kunnen we acties rechts van de paginatitel zien met verschillende pictogrammen. Acties van Kirigami kunnen op verschillende manieren getoond worden en kunnen een brede variëteit van dingen doen.
Aftellingen toevoegen
Een aftel toepassing is tamelijk nutteloos zonder de mogelijkheid om aftellingen toe te voegen. Laten we een actie aanmaken die ons dat laat doen.
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
})
}
...
}
We plaatsen onze actie van Kirigami in onze hoofdpagina uit onze eerdere inleidingen. Als we dat willen kunnen we meer acties aan onze pagina toevoegen (en zelfs acties nesten in acties!). Componenten
Kirigami.Action
worden gebruikt als contextuele acties binnen Kirigami pagina's. We stellen ze specifiek in op de eigenschap
actions.main
van onze
Kirigami.Page
: het object actions
heeft eigenschappen die ons verschillende acties in verschillende posities laat instellen, maar omdat onze actie "Add kountdown" centraal voor onze UI is, zetten we het als de hoofdactie op deze pagina.
De eigenschappen id
en text
zouden bekend moeten zijn uit eerdere inleidingen. De geërfde eigenschap Action.icon zou interessant moeten zijn: het is een object met verschillende eigenschappen die u bepaalde pictogrammen voor uw acties laat tonen. Gelukkig alles wat we nodig hebben, bij gebruik van KDE pictogrammen, het leveren van de naameigenschap voor de pictogrameigenschap, icon.name
.
Notitie
Cuttlefish is een KDE toepassing die u alle pictogrammen laat zien die u voor uw toepassing kunt gebruiken. Het biedt een aantal nuttige functies zoals voorbeelden van hun uiterlijk over verschillende geïnstalleerde thema's, voorbeelden bij verschillende groottes en meer. U zou het een nuttig hulpmiddel kunnen vinden bij beslissen over welke pictogrammen in uw toepassing te gebruiken.
Veel van de pictogrammen van KDE volgen de specificatie FreeDesktop Icon Naming. U zou het daarom ook nuttig kunnen vinden om de website van The FreeDesktop project te consulteren, die lijsten heeft van cross-desktop compatibele pictogramnamen.
De eigenschap
onTriggered
is de belangrijkste. Dit is wat onze actie zal doen wanneer het wordt gebruikt. U zult opmerken dat in ons voorbeeld we de methode kountdownModel.append van het kountdownModel
gebruiken dat we in onze vorige inleiding hebben aangemaakt. Deze methode laten ons een nieuw element toevoegen aan ons lijstmodel. We leveren het met een object (aangegeven door accolades {}
) dat de relevante eigenschappen heeft voor ons aftellen (naam, beschrijving en een plaatshouder datum).

Elke keer dat we op onze knop "Aftellen toevoegen" rechtsboven klikken, wordt onze aangepaste aftelling toegevoegd

Mobiele versie
Globale schuiflade
Hebt u de drie regels naast de paginatitel op de vorige schermafdruk gezien? Dat is een hamburgermenu dat een Kirigami.GlobalDrawer opent. Globale schuifladen zijn nuttig voor globale navigatie en acties: met andere woorden, die dingen die u nodig kunt hebben om uw gehele toepassing te gebruiken. We gaan een eenvoudige globale schuiflade aanmaken die een afsluitknop bevat.
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()
}
]
}
...
}
Hier stoppen we onze globale schuiflade in ons toepassingsvenster. De hoofdeigenschap die we nodig hebben om aandacht aan te geven is GlobalDrawer.actions , die de vorm van een array met Kirigami.Action componenten aanneemt. Deze actie heeft een toepasselijk pictogram en start de functie Qt.quit() , om de toepassing af te sluiten.
Omdat we onze globale schuiflade voor nu eenvoudig houden, stellen we de eigenschap GlobalDrawer.isMenu in op true. Dit toont onze globale schuiflade als een normaal toepassingsmenu, die minder ruimte inneemt dan het standaard globale schuifladepaneel.

Globale schuiflade

Globale schuiflade als menu
Notitie
De pagina op acties gebaseerde componenten van deze documenten levert verdere details over acties van Kirigami en hoe ze gebruikt kunnen worden.Onze toepassing (app) tot zover
|
|