Lägga till åtgärder
Sammanfattning
Hittills har vi lyckats bygga ett enkelt program som kan visa kort. Vi har dock inte ännu något sätt att lägga till nya kort i vår kortvy.
I den här handledningen tar vi en titt på åtgärder i Kirigami. De hjälper oss att lägga till interaktivitet i vårt program på ett konsekvent, snabbt och tillgängligt sätt.
Åtgärder
En åtgärd (Action) i Kirigami inkapslar en åtgärd i ett användargränssnitt. Vi kan använda dem för att tillhandahålla åtgärder i våra program som är enkla att nå och är grundläggande för deras funktion.

Sidåtgärder på skrivbordet.
Om du har använt Kirigami-program tidigare, har du med säkerhet interagerat med Kirigiami åtgärder. På den här bilden kan vi se åtgärder till höger om sidans titel med olika ikoner. Åtgärder i Kirigami kan visas på flera olika sätt och kan göra ett stort antal saker.
Lägga till nedräknare
Ett nedräkningsprogram är ganska oanvändbart utan möjlighet att lägga till nedräknare. Låt oss skapa en åtgärd som låter oss göra det.
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
})
}
...
}
Vi placerar vår Kirigami åtgärd inne i vår huvudsida från våra tidigare handledningar. Om vi ville, skulle vi kunna lägga till fler åtgärder på vår sida (och till och med nästla åtgärder inne i åtgärder). Kirigami.Action
komponenter används som sammanhangsberoende åtgärder inom Kirigami sidor. Specifikt tilldelar vi den till egenskapen actions.main
på sidan: objektet actions
har egenskaper som låter oss tilldela olika åtgärder på olika platser, men eftersom vår åtgärd 'Add Kountdown' är central för vårt användargränssnitt, tilldelar vi den som huvudåtgärd på sidan.
Egenskaperna id
och text
bör vara välkända från tidigare handledningar. Dock kan den nya egenskapen icon
vara intressant: det är ett objekt med flera egenskaper som låter dig visa vissa ikoner för dina åtgärder. Lyckligtvis är allt vi behöver göra för att använda KDE-ikoner att tillhandahålla namnegenskapen i icon-egenskapen, icon.name
.
Anmärkning
Cuttlefish är ett KDE-program som låter dig visa alla ikoner som du kan använda i ditt program. Det erbjuder ett antal användbara funktioner, såsom förhandsgranskningar av deras utseenden över olika installerade teman, förhandsgranskningar vid olika storlekar, med mera. Du previews of their appearance across different installed themes, previews at different sizes, and more. Det kan vara ett användbart verktyg när du ska bestämma dig för vilka ikoner du vill använda i ditt program.
Många av KDE:s ikoner följer FreeDesktop specifikation för namngivning av ikoner. Därför kan det också vara nyttigt att konsultera FreeDesktop-projektets webbplats, som listar alla kompatibla ikonnamn för olika skrivbord.
Egenskapen onTriggered
är den viktigaste. Det är vad vår åtgärd gör när den används. Du märker att i vårt exempel använder vi metoden kountdownModel.append
från kountdownModel
som vi skapade i vår föregående handledning. Metoden låter oss lägga till ett nytt element i vår listmodell. Vi tillhandahåller den med ett objekt som har relevanta egenskaper för våra nedräknare (namn, beskrivning och ett platsmarkerande datum).

Varje gång vi nu klickar på vår knapp 'Add Kountdown' längst upp till höger, läggs vår egna nedräknare till.
Global låda
Märkte du de tre linjerna intill sidans titel på föregående skärmbild? Det är en global låda. Globala lådor är användbara för global navigering och åtgärder: med andra ord, de saker som du kan behöva använda överallt i programmet. Vi ska skapa en enkel global låda som inkluderar en stängningsknapp.
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()
}
]
}
...
}
Här placerar vi vår globala låda inne i programfönstret. Huvudegenskapen som vi måste ta hänsyn till är actions
, som har formen av ett fält av Kirigami.Action
komponenter. Åtgärden har en lämplig ikon och utlöser funktionen Qt.quit()
, som stänger programmet.
Eftersom vi håller vår globala låda enkel för tillfället, ställer vi in egenskapen isMenu
till true. Det visar vår globala låda som en normal programmeny, vilket upptar mindre utrymme än den normala rutan för globala lådor.