Toevoegen van acties
Samenvattend
Tot nu toe hebben we een eenvoudige toepassing gemaakt die kaarten kan tonen. We hebben echter nog geen manier om door de gebruiker nieuwe kaarten aan de 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.
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.
![](actions-desktop.webp)
![](actions-mobile.webp)
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 {
// Other page properties...
actions: [
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 are placing our Kirigami.Action within our main page from the previous tutorials. If we wanted to, we could add more actions to our page (and even nest actions within actions!).
The brackets []
used above are similar to JavaScript arrays, which means you can pass one or more things to them, separated by comma:
// General JavaScript array of components:
variable: [ component1, component2 ]
// Passing an array of Kirigami actions to QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]
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
.
Viewing the available icons
Click here to see how to check the available ic on your system
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](action_result.webp)
Elke keer dat we op onze knop "Aftellen toevoegen" rechtsboven klikken, wordt onze aangepaste aftelling toegevoegd
![Mobiele versie](action_result_mobile.webp)
Mobiele versie
Globale schuiflade
The next component is a Kirigami.GlobalDrawer . It shows up as a hamburger menu. By default it opens a sidebar, which is especially useful on mobile, as the user can just swipe in a side of the screen to open it. Global drawers are useful for global navigation and actions. We are going to create a simple global drawer that includes a "quit" button.
Kirigami.ApplicationWindow {
id: root
// Other window properties...
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](global_drawer.webp)
Globale schuiflade
![Globale schuiflade als menu](quit_action.webp)
Globale schuiflade als menu
Tip
De pagina op acties gebaseerde componenten van deze documenten levert verdere details over acties van Kirigami en hoe ze gebruikt kunnen worden.Acties staan in een context
Kirigami components are designed in such a way that the place where you put Kirigami Actions is relevant. As seen above, if you add actions to a Kirigami.Page , Kirigami.ScrollablePage or any other derivative Page component, they will show up on the right side of the header in desktop mode, and on the bottom in mobile mode.
Similarly, if Kirigami Actions are added to a Kirigami.GlobalDrawer , they will show up in the resulting drawer or menu.
Other examples of Kirigami Actions showing up differently depending on their parent component are:
- Kirigami.ContextDrawer - ContextDrawer tutorial here
- Kirigami.AbstractCard and derivatives - Card tutorial here
- Kirigami.Dialog and derivatives - Dialog tutorial here
- Kirigami.ActionToolBar - ActionToolBar handleiding hier
Tussen andere Kirigami-componenten
Onze toepassing (app) tot zover
Main.qml:
|
|