Añadir acciones
Resumen
Hasta ahora, hemos logrado crear una aplicación simple que puede mostrar tarjetas. Sin embargo, todavía no tenemos una forma de añadir nuevas tarjetas a nuestra vista de tarjetas.
En este tutorial, veremos las acciones de Kirigami. Estas nos ayudarán a añadir interactividad a nuestra aplicación de una manera consistente, rápida y accesible.
Acciones
Una Kirigami.Action encapsula una acción de la interfaz de usuario. Podemos usarlas para proporcionar a nuestras aplicaciones acciones de fácil acceso que son esenciales para su funcionalidad.

Acciones de página en el escritorio

Acciones de página en el móvil
Si ha usado aplicaciones de Kirigami con anterioridad, ya habrá interactuado con las acciones de Kirigami. En esta imagen podemos ver acciones a la derecha del título de la página con diversos iconos. Las acciones de Kirigami se pueden mostrar de varias formas y pueden hacer una amplia variedad de cosas.
Añadir cuentas regresivas
Una aplicación de cuenta regresiva es bastante inútil sin la capacidad de añadir cuentas regresivas. Vamos a crear una acción que nos permita hacer esto.
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
})
}
...
}
We are placing our Kirigami Action within our main page from our previous tutorials. If we wanted to, we could add more actions to our page (and even nest actions within actions!).
Kirigami.Action
components are used as contextual actions within Kirigami pages. We are setting it specifically to the
actions.main
property of our
Kirigami.Page
: the actions
object has properties that let us set different actions in different positions, but since our "Add kountdown" action is central to our UI we are setting it as the main action of this page.
The id
and text
properties should be familiar from previous tutorials. However, the inherited Action.icon property should be interesting: it is an object with several properties letting you display certain icons for your actions. Fortunately, to use KDE icons all we need to do is provide the name property for the icon property, icon.name
.
Nota
Cuttlefish es una aplicación de KDE que le permite ver todos los iconos que puede usar en su aplicación. Ofrece una serie de funciones útiles, como vistas previas de su apariencia con los diferentes temas instalados, vistas previas en distintos tamaños y más. Puede que le resulte una herramienta útil a la hora de decidir los iconos que va a utilizar en su aplicación.
Many of KDE's icons follow the FreeDesktop Icon Naming specification. Therefore, you might also find it useful to consult The FreeDesktop project's website, which lists all cross-desktop compatible icon names.
The
onTriggered
signal handler is the most important. This is what our action will do when it is used. You'll notice that in our example we're using the method kountdownModel.append of the kountdownModel
we created in our previous tutorial. This method lets us append a new element to our list model. We are providing it with an object (indicated by curly braces {}
) that has the relevant properties for our countdowns (name
, description
, and a placeholder date
).

Each time we click our "Add kountdown" button on the top right, our custom countdown is added

Versión móvil
Cajón global
Did you notice those three lines next to the page title on the previous screenshot? That's a hamburger menu that opens a Kirigami.GlobalDrawer . Global drawers are useful for global navigation and actions: in other words, those things you might need to use throughout your application. We are going to create a simple global drawer that includes a "quit" button.
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()
}
]
}
...
}
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.

Cajón global

Cajón global como menú
Nota
The Actions based components page of these docs provides further detail on Kirigami Actions and how they can be used.Nuestra aplicación hasta ahora
|
|