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 Kirigami.Action 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.
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
för vår
Kirigami.Page
: 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 ärvda egenskapen Action.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 (angivet av klammerparenteser {}
) som har relevanta egenskaper för våra nedräknare (name
, description
, och ett platsmarkerande date
).
Global låda
Märkte du de tre linjerna intill sidans titel på föregående skärmbild? Det är en hamburgermeny som öppnar en Kirigami.GlobalDrawer . 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 GlobalDrawer.actions , som har formen av ett fält av Kirigami.Action komponenter. Åtgärden har en lämplig ikon och kör funktionen Qt.quit() när den utlöses, som stänger programmet.
Eftersom vi håller vår globala låda enkel för tillfället, ställer vi in egenskapen
GlobalDrawer.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.
Anmärkning
Sidan Actions based components i den här dokumentationen ger ytterligare information om Kirigami åtgärder och hur de kan användas.Vårt program så långt
|
|