Dodajanje dejanj
Povzetek
Doslej smo zgradili preprosto aplikacijo, ki lahko prikazuje kartice. Vendar uporabnik trenutno ne more dodati novih kartic v pogled kartic.
V tem učbeniku, bomo videli akcije Kirigami. Te nam bodo pomagale dodati interaktivnost v našo aplikacijo na dosleden, hiter in dostopen način.
Dejanja
A Kirigami.Action encapsulates a user interface action. We can use these to provide our applications with easy-to-reach actions that are essential to their functionality.
Če ste že prej uporabljali aplikacije Kirigami, ste zagotovo že spoznali interakcijo z Kirigami Actions. Na tej sliki lahko vidimo dejanja na desni strani naslova z različnimi ikonami. Kirigami Actions lahko prikažemo na več načinov in lahko naredijo veliko različnih stvari.


Dodajanje odštevanj
Aplikacija za odštevanje je precej neuporabna brez možnosti dodajanja odštevanja. Ustvarimo akcijo, ki nam bo to dovolila.
pageStack.initialPage: Kirigami.ScrollablePage {
// Druge lastnosti strani...
actions: [
Kirigami.Action {
id: addAction
icon.name: "list-add-symbolic"
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!).
Zgoraj uporabljeni oklepaji []
so podobni poljem JavaScript, kar pomeni, da jim lahko posredujete eno ali več stvari, ločenih z vejico:
// Splošno polje komponent JavaScript:
variable: [ component1, component2 ]
// Posredovanje niza dejanj Kirigami v QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]
Lastnosti id
in text
morate poznati iz prejšnjih vadnic. Vendar bi morala biti podedovana lastnost Action.icon zanimiva: gre za objekt z več lastnostmi omogoča prikaz določenih ikon za vaša dejanja. Na srečo moramo za uporabo ikon KDE zagotoviti samo lastnost imena za lastnost ikone, icon.name
.
Ogled razpoložljivih ikon
Click here to see how to check the available icons on your system
Icon Explorer is a KDE application that lets you view all the icons that you can use for your application. It offers a number of useful features such as previews of their appearance across different installed themes, previews at different sizes, and more. You might find it a useful tool when deciding on which icons to use in your application.
Mnoge ikone KDE sledijo specifikaciji poimenovanja ikon FreeDesktop. Zato se utegne biti tudi koristno, da se posvetujete s spletnim mestom projekta FreeDesktop, ki na svoji spletni strani našteva vsa imena združljivih ikon.
Prožilnik onTriggered je najpomembnejši. To bo naredila naša dejavnost, ko bo uporabljena. Opazili boste, da v našem primeru uporabljamo metodo kountdownModel.append modela 'kountdownModel', ki smo ga ustvarili v prejšnjih vajah. S to metodo lahko v naš model seznama priložimo nov element. Ponujamo mu predmet, ki ima ustrezne lastnosti za naše odštevanje (ime - name
, opis - description
in datum bodoče lokacije - placeholder date
).

Vsakič, ko kliknemo naš gumb "Add kountdown" na zgornjem desnem kotu, je dodano naše odštevanje po meri

Mobilna verzija
Globalni predal
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
// Druge lastnosti oken...
globalDrawer: Kirigami.GlobalDrawer {
isMenu: true
actions: [
Kirigami.Action {
text: i18n("Quit")
icon.name: "application-exit-symbolic"
shortcut: StandardKey.Quit
onTriggered: Qt.quit()
}
]
}
// ...
}
Here, we put our global drawer inside our application window. The main property we need to pay attention to is GlobalDrawer.actions, which takes the form of an array of Kirigami.Action components. This action has an appropriate icon and executes the Qt.quit() function when triggered, closing the application.
Since we are keeping our global drawer simple for now, we are setting the GlobalDrawer.isMenu property to true
. This displays our global drawer as a normal application menu, taking up less space than the default global drawer pane.

Globalni predal

Globalni predal kot meni
Nasvet
Stran Actions based componentsv teh dokumentih vsebuje dodatne podrobnosti o dejanjih Kirigami in načinu, kako jih je mogoče uporabiti.Dejanja so kontekstualna
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.
Drugi primeri dejanj Kirigami, ki se prikazujejo drugače glede na njihovo nadrejeno komponento, so:
- Kirigami.ContextDrawer - ContextDrawer tutorial here
- Kirigami.AbstractCard and derivatives - Card tutorial here
- Kirigami.Dialog and derivatives - Dialog tutorial here
- Kirigami.ActionToolBar - ActionToolBar tutorial here
Med drugimi komponentami Kirigami.
Naša aplikacija do sedaj
Main.qml:
|
|