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()
            }
        ]
    }
    // ...
}

Aqui, colocamos nossa gaveta global dentro da janela do aplicativo. A principal propriedade à qual precisamos prestar atenção é GlobalDrawer.actions, que assume a forma de um array de componentes Kirigami.Action. Esta ação tem um ícone apropriado e executa a função Qt.quit() quando acionada, fechando o aplicativo.

Como estamos mantendo nossa gaveta global simples por enquanto, estamos definindo a propriedade GlobalDrawer.isMenu como true. Isso exibe nossa gaveta global como um menu de aplicativo normal, ocupando menos espaço do que o painel padrão da gaveta global.

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