Gavetas

Gavetas são painéis que deslizam para fora das laterais da janela do aplicativo. Elas podem ser preenchidas com elementos interativos, como ações do Kirigami, botões, texto e muito mais.

As gavetas vêm em diferentes tipos, formatos e formas. Nesta página, abordaremos cada tipo e forneceremos uma visão geral de suas características.

Gaveta global

A gaveta global é um recurso padrão nos aplicativos móveis do KDE e, às vezes, também pode ser encontrada em suas versões para desktop. Ela contém o menu principal do aplicativo: aqui estão incluídas todas as funções que não são específicas da página atual, mas ainda significativas para a navegação geral ou a interação dentro do aplicativo.

Ela pode ser ativado tocando no menu de hambúrguer ou deslizando da borda esquerda para o meio da tela no modo da esquerda para a direita ou da borda direita no modo da direita para a esquerda.

Os componentes Kirigami.GlobalDrawer são o que usamos para criar essas gavetas. Eles são definidos para a propriedade globalDrawer da Kirigami.ApplicationWindow que forma a base do nosso aplicativo Kirigami.

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Cabeçalho

Cabeçalhos podem ser usados ​​para posicionar componentes fixos no topo da sua gaveta global. Os componentes de cabeçalho permanecerão no lugar mesmo que sua gaveta global contenha ações Kirigami aninhadas que substituam a camada atual na gaveta global.

O componente de cabeçalho escolhido pode ser definido com a propriedade header da gaveta global, e substituirá o título da gaveta global. Isso é útil para adicionar um Kirigami.SearchField, por exemplo:

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer with searchfield (not visible)"

        header: Kirigami.SearchField {
                id: searchField
        }

        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Adaptando para o desktop

Embora gavetas globais em estilo de painel possam ser úteis em ambientes móveis, elas podem ser muito grandes no desktop, especialmente quando o aplicativo tem poucas ações.

Felizmente, as gavetas globais do Kirigami fornecem uma propriedade isMenu. Quando definida como true, elas se transformam em menus mais tradicionais apenas no desktop.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // Ações do Kirigami aqui...
    ]
}

Gavetas de contexto

Enquanto uma Kirigami.GlobalDrawer exibe ações globais disponíveis em todo o seu aplicativo, uma Kirigami.ContextDrawer deve ser usada para exibir ações que são relevantes apenas em determinados contextos. Isso geralmente é usado em páginas separadas.

Uma gaveta de contexto se comportará de maneira diferente dependendo se estiver sendo usada em uma plataforma móvel ou em um desktop.

Em um desktop, quando uma janela tem espaço suficiente, as ações contextuais aparecem como parte do grupo actions na barra de ferramentas superior. Quando o espaço é limitado, como em um dispositivo móvel ou em uma janela estreita, as ações contextuais ficam ocultas atrás de um menu de hambúrguer no lado direito. Isso é diferente de outras ações no grupo ações, como actions.main, actions.left e actions.right; elas não ficam ocultas em janelas com espaço limitado e, em vez disso, são recolhidas em seus respectivos ícones.

 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

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    height: 600
    width: 1200
    minimumWidth: 500

    globalDrawer: Kirigami.GlobalDrawer {}
    contextDrawer: Kirigami.ContextDrawer {}

    pageStack.initialPage: [ emptyPage, contextDrawerPage ]

    Kirigami.Page {
        title: "Empty page"
        id: emptyPage
    }

    Kirigami.Page {
        id: contextDrawerPage
        title: "Context Drawer page"

        actions: [
            Kirigami.Action {
                icon.name: "media-record"
            },
            Kirigami.Action {
                icon.name: "arrow-left"
            },
            Kirigami.Action {
                icon.name: "arrow-right"
            },
            Kirigami.Action {
                text: "Contextual Action 1"
                icon.name: "media-playback-start"
            },
            Kirigami.Action {
                text: "Contextual Action 2"
                icon.name: "media-playback-stop"
            }
        ]
    }
}

No celular, a gaveta sempre consiste em ações escondidas atrás de um menu de hambúrguer. Ela pode ser ativada tocando no menu de hambúrguer ou deslizando da borda direita para o meio da tela no modo da esquerda para a direita ou da borda esquerda no modo da direita para a esquerda.

Gavetas modais e em linha

O Kirigami oferece dois tipos adicionais de gavetas: gavetas modais e gavetas em linha. Elas são bastante semelhantes: ambas abrangem toda a largura ou altura do aplicativo e podem ser posicionadas nas bordas da janela. No entanto, elas reagem de forma diferente à interação do usuário.

• As gavetas modais ficam ocultas por padrão e escurecem o restante do aplicativo, sendo descartadas ao clicar em uma área escurecida.
• As gavetas em linha são exibidas por padrão e permitem que o usuário interaja com o restante do aplicativo sem ser dispensada, além de não escurecer outras áreas.

Esse tipo de gaveta é aberto e flexível, mas, geralmente, você pode querer usá-lo quando quiser que uma pequena lista de opções apareça ao pressionar e segurar ou clicar com o botão direito.

Essas duas gavetas são tão semelhantes porque podem, de fato, ser implementadas usando o mesmo componente Kirigami: Kirigami.OverlayDrawer. Aqui estão algumas propriedades herdadas importantes deste componente para se ter em mente:

• Popup.modal controla se a gaveta será modal ou em linha dependendo de um valor booleano.
• Drawer.edge controla em qual borda da janela do aplicativo a gaveta aparecerá; as opções para esta propriedade fazem parte da enum Edge, ou seja, Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge e Qt.LeftEdge.
• Popup.contentItem contém o componente que formará o conteúdo da sua gaveta.

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

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 400
    height: 600
    pageStack.initialPage: Kirigami.Page {
        title: "OverlayDrawer at the bottom"
        actions: [
            Kirigami.Action {
                text: "Open bottomDrawer"
                onTriggered: bottomDrawer.open()
            }
        ]
        Kirigami.OverlayDrawer {
            id: bottomDrawer
            edge: Qt.BottomEdge
            // Defina modal como falso para deixar esta gaveta em linha!
            modal: true

            contentItem: RowLayout {
                Controls.Label {
                    Layout.fillWidth: true
                    text: "Say hello to my little drawer!"
                }
                Controls.Button {
                    text: "Close"
                    onClicked: bottomDrawer.close()
                }
            }
        }
    }
}