Skip to main content
Ir para o conteúdo
Editar esta página See source code Criar um bug sobre a documentação Formatting guidelines Style guidelines

Adicionando ações

Aprender mais sobre as ações do Kirigami nos ajudará a tornar nosso aplicativo mais útil.

Recapitulação

Até agora, criamos um aplicativo simples que pode exibir cartões. No entanto, atualmente não há como o usuário adicionar novos cartões à visualização de cartões.

Neste tutorial, veremos as ações do Kirigami. Elas nos ajudarão a adicionar interatividade ao nosso aplicativo de forma consistente, rápida e acessível.

Ações

Uma Kirigami.Action encapsula uma ação de interface do usuário. Podemos usá-la para fornecer aos nossos aplicativos ações fáceis de alcançar, essenciais para sua funcionalidade.

Se você já usou aplicativos Kirigami, certamente já interagiu com ações Kirigami. Nesta imagem, podemos ver ações à direita do título da página com vários ícones. As ações Kirigami podem ser exibidas de diversas maneiras e podem realizar uma ampla variedade de ações.

Adicionando contagem regressiva

Um aplicativo de contagem regressiva é praticamente inútil sem a capacidade de adicionar contagens regressivas. Vamos criar uma ação que nos permita fazer isso.

pageStack.initialPage: Kirigami.ScrollablePage {
    // Outras propriedades da página...
    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
            })
        }
    ]
    // ...
}

Estamos colocando nosso Kirigami.Action dentro da nossa página principal dos tutoriais anteriores. Se quiséssemos, poderíamos adicionar mais ações à nossa página (e até mesmo aninhar ações dentro de ações!).

Os colchetes [] usados ​​acima são semelhantes aos arrays JavaScript, o que significa que você pode passar uma ou mais coisas para eles, separadas por vírgula:

// Array de componentes JavaScript:
variable: [ component1, component2 ]
// Passando uma série de ações Kirigami para QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]

As propriedades id e text devem ser familiares de tutoriais anteriores. No entanto, a propriedade herdada Action.icon deve ser interessante: é um objeto com diversas propriedades que permitem exibir determinados ícones para suas ações. Felizmente, para usar os ícones do KDE, tudo o que precisamos fazer é fornecer a propriedade name para a propriedade do ícone, icon.name.

O manipulador de sinais onTriggered é o mais importante. É isso que nossa ação fará quando for usada. Você notará que, em nosso exemplo, estamos usando o método kountdownModel.append do kountdownModel que criamos em nosso tutorial anterior. Este método nos permite adicionar um novo elemento ao nosso modelo de lista. Estamos fornecendo a ele um objeto (indicado por chaves {}) que possui as propriedades relevantes para nossas contagens regressivas (name, description e um espaço reservado date).


Cada vez que clicamos no botão "Adicionar contagem regressiva" no canto superior direito, nossa contagem regressiva personalizada é adicionada

Cada vez que clicamos no botão "Adicionar contagem regressiva" no canto superior direito, nossa contagem regressiva personalizada é adicionada

Versão para dispositivos móveis

Versão para dispositivos móveis

Gaveta global

O próximo componente é uma Kirigami.GlobalDrawer. Ela aparece como um menu de hambúrguer. Por padrão, ela abre uma barra lateral, o que é especialmente útil em dispositivos móveis, pois o usuário pode simplesmente deslizar um lado da tela para abri-la. Gavetas globais são úteis para navegação e ações globais. Vamos criar uma gaveta global simples que inclui um botão "sair".

Kirigami.ApplicationWindow {
    id: root
    // Outras propriedades da janela...
    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.

Gaveta global

Gaveta global

Gaveta global como um menu

Gaveta global como um menu

Ações são contextuais

Os componentes Kirigami são projetados de forma que o local onde você insere as ações do Kirigami seja relevante. Como visto acima, se você adicionar ações a uma Kirigami.Page, Kirigami.ScrollablePage ou qualquer outro componente derivado de Página, elas serão exibidas no lado direito do cabeçalho no modo desktop e na parte inferior no modo de dispositivos móveis.

Da mesma forma, se as ações do Kirigami forem adicionadas a um Kirigami.GlobalDrawer, elas aparecerão na gaveta ou menu resultante.

Outros exemplos de ações do Kirigami que aparecem de forma diferente dependendo do seu componente pai são:

Entre outros componentes do Kirigami.

Nosso aplicativo até agora

Main.qml:
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    id: root

    width: 400
    height: 300

    title: i18nc("@title:window", "Day Kountdown")

    // Global drawer element with app-wide actions
    globalDrawer: Kirigami.GlobalDrawer {
        // Makes drawer a small menu rather than sliding pane
        isMenu: true
        actions: [
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }

    ListModel {
        id: kountdownModel
        ListElement {
            name: "Dog birthday!!"
            description: "Big doggo birthday blowout."
            date: 100
        }
    }

    Component {
        id: kountdownDelegate
        Kirigami.AbstractCard {
            contentItem: Item {
                implicitWidth: delegateLayout.implicitWidth
                implicitHeight: delegateLayout.implicitHeight
                GridLayout {
                    id: delegateLayout
                    anchors {
                        left: parent.left
                        top: parent.top
                        right: parent.right
                    }
                    rowSpacing: Kirigami.Units.largeSpacing
                    columnSpacing: Kirigami.Units.largeSpacing
                    columns: root.wideScreen ? 4 : 2

                    Kirigami.Heading {
                        Layout.fillHeight: true
                        level: 1
                        text: date
                    }

                    ColumnLayout {
                        Kirigami.Heading {
                            Layout.fillWidth: true
                            level: 2
                            text: name
                        }
                        Kirigami.Separator {
                            Layout.fillWidth: true
                            visible: description.length > 0
                        }
                        Controls.Label {
                            Layout.fillWidth: true
                            wrapMode: Text.WordWrap
                            text: description
                            visible: description.length > 0
                        }
                    }
                    Controls.Button {
                        Layout.alignment: Qt.AlignRight
                        Layout.columnSpan: 2
                        text: i18n("Edit")
                    }
                }
            }
        }
    }

    pageStack.initialPage: Kirigami.ScrollablePage {
        title: i18nc("@title", "Kountdown")

        // Kirigami.Action encapsulates a UI action. Inherits from Controls.Action
        actions: [
            Kirigami.Action {
                id: addAction
                // Name of icon associated with the action
                icon.name: "list-add-symbolic"
                // Action text, i18n function returns translated string
                text: i18nc("@action:button", "Add kountdown")
                // What to do when triggering the action
                onTriggered: kountdownModel.append({
                    name: "Kirigami Action added card!",
                    description: "Congratulations, your Kirigami Action works!",
                    date: 1000
                })
            }
        ]

        Kirigami.CardsListView {
            id: cardsView
            model: kountdownModel
            delegate: kountdownDelegate
        }
    }
}
Previous
Layouts, ListViews e Cards
Next
Adicionando um diálogo