Lägga till åtgärder

Att lära oss mer om åtgärder i Kirigami hjälper oss att göra vårt program användbarare.

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.

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.

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.

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.