Áreas

Estas áreas ou gavetas oferecem às aplicações um acesso rápido aos controlos e páginas da sua aplicação.

As áreas são painéis que deslizam dos lados da janela da aplicação. Os mesmos poderão ser preenchidos com elementos interactivos como acções, botões, texto, entre outras coisas do Kirigami.

As áreas existem sob diferentes tipos, formas e formatos. Nesta página iremos passar por cada tipo e dar uma visão geral das suas características.

Área global

A área global é uma característica-padrão das aplicações móveis e que poderá ser encontrada alguma vezes nas suas versões futuras. Contém um menu principal da aplicação: neste existem as funções que não sejam específicas da página actual, mas que sejam à mesma relevantes para a navegação geral ou para alguma interacção dentro da aplicação.

Poderá ser activado se tocar no menu do hambúrguer ou deslizando do extremo esquerdo para o meio do ecrã, no modo da Esquerda para a Direita, ou do extremo direito para o centro no modo da Direita para a Esquerda.

Os componentes Kirigami.GlobalDrawer são o que usamos para criar essas áreas. São configurados na propriedade globalDrawer do Kirigami.ApplicationWindow que forma a base da nossa aplicação de Kirigami.

Kirigami.ApplicationWindow {

    globalDrawer: Kirigami.GlobalDrawer {
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "gtk-quit"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
    ...
}

Imagem de uma área global no modo para computador, que se assemelha a uma barra lateral

Cabeçalho

Os cabeçalhos poderão ser usados para colocar componentes fixos no topo da sua área global. Os componentes de cabeçalho irão permanecer no lugar, mesmo que a sua área global tenha acções encadeadas do Kirigami que substituam a camada actual na área global.

O seu componente de cabeçalho poderá ser configurado com a propriedade header da área global.

globalDrawer: Kirigami.GlobalDrawer {

    header: Kirigami.AbstractApplicationHeader {

        contentItem: Kirigami.SearchField {
            id: searchField
            Layout.fillWidth: true
        }
    }

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

A nossa área global agora mostra o componente da barra de pesquisa que definimos como cabeçalho

Adaptar-se ao computador

Embora as áreas globais do tipo painel possam ser úteis em ambientes móveis, poderão ser demasiado grandes para o computador.

Felizmente, as áreas globais do Kirigami oferecem uma propriedade isMenu . Quando for configurada como true, as nossas áreas globais transformam-se em menus mais tradicionais no computador.

Nota

Neste modo de menu, os cabeçalhos e rodapés não ficam visíveis.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

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

Área global no modo de menu, sem um cabeçalho ou separador

Separadores

Os separadores permitem-lhe mostrar um título e um ícone no topo da sua área global (mais acima do cabeçalho).

Contudo, por omissão, os separadores são ficam visíveis em dispositivos móveis. Poderá alter isto se mudar a propriedade bannerVisible do componente da área global como true (verdadeiro).

Os títulos, definidos com a propriedade title , poderão ser usados para embelezar a sua área global e torná-la menos esparsa. De forma mais importante, poderá recordar os seus utilizadores de que esta é uma área da aplicação em vez de ser uma área local.

Existe também uma propriedade titleIcon , a qual poderá ser emparelhada com o seu título para tornar a área global ainda mais agradável a nível estético. Este ícone aparecerá à esquerda do título.

globalDrawer: Kirigami.GlobalDrawer {
    title: "My Global Drawer"
    titleIcon: "kde"
    bannerVisible: true
    actions: [
        Kirigami.Action {
            text: "Kirigami Action 1"
        },
        Kirigami.Action {
            text: "Kirigami Action 2"
        },
        Kirigami.Action {
            text: i18n("Quit")
            icon.name: "application-exit"
            shortcut: StandardKey.Quit
            onTriggered: Qt.quit()
        }
    ]
}

Área global com um título e um ícone no separador

Nota

A propriedade titleIcon recebe nomes dos ícones conhecidos do sistema, de acordo com a especificação do FreeDesktop. Estes ícones e nomes de ícones poderão ser vistos com a aplicação CuttleFish, que vem com o pacote plasma-sdk, ou consultando a especificação de nomes de ícones do FreeDesktop.

Áreas de Contexto

Enquanto um Kirigami.GlobalDrawer mostra as acções globais disponíveis por toda a sua aplicação, um Kirigami.ContextDrawer deverá ser usado para mostrar as acções que só são relevantes em determinados contextos. Este é normalmente usado em páginas separadas.

Uma área de contexto só irá aparecer se tiver criado alguma variável contextualActions como parte do grupo Page.actions . Também se comporta de forma diferente, dependendo se é usado num dispositivo móvel ou num computador.

Num computador, quando uma janela tem espaço suficiente, as acções de contexto aparecem como parte do grupo actions na barra de ferramentas de topo. Quando o espaço é limitado, como acontece num dispositivo móvel ou numa janela estreita, as acções de contexto ficam escondidas num menu em hambúrguer do lado direito. Isto é diferente das outras acções no grupo actions, nomeadamente as actions.main, actions.left e actions.right; estas não ficam escondidas nas janelas bastante reduzidas, sendo sim reduzidas nos 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
44
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    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 {
            main: Kirigami.Action {
                icon.name: "media-record"
            }
            left: Kirigami.Action {
                icon.name: "arrow-left"
            }
            right: Kirigami.Action {
                icon.name: "arrow-right"
            }
            contextualActions: [
                Kirigami.Action {
                    text: "Contextual Action 1"
                    icon.name: "media-playback-start"
                },
                Kirigami.Action {
                    text: "Contextual Action 2"
                    icon.name: "media-playback-stop"
                }
            ]
        }
    }
}

Área de contexto com as acções de contexto escondidas

Área de contexto a mostrar todas as acções de contexto

Em dispositivos móveis, a área consiste sempre nas acções escondidas atrás do menu em hambúrguer. Pode ser activado se tocar no menu em hambúrguer ou deslizando o dedo do lado direito para o centro do ecrã, caso esteja no modo da Esquerda para a Direita, ou do lado esquerdo para o centro, se tiver no modo inverso. Se estiver numa computador e quiser experimentar a interface para dispositivos móveis, poderá executar a sua aplicação com a variável de ambiente QT_QUICK_CONTROLS_MOBILE=1.

O mesmo exemplo acima, a correr num dispositivo móvel

Área de contexto aberta no modo para dispositivos móveis

Áreas Modais e Incorporadas

O Kirigami oferece dois tipos adicionais de áreas, as áreas modais e as incorporadas. Estas são muito parecidas entre si: ambas ocupam por inteiro a largura ou altura da aplicação e poderão ser colocadas nos extremos da janela da aplicação . Contudo, reagem de forma diferente à interacção com o utilizador.

As área modais escurecem o resto da aplicação e, como nas folhas sobrepostas , irão desaparecer quando carregar numa área escura.
As áreas incorporadas permitem ao utilizador continuar a interagir com o resto da aplicação sem que as feche, não escurecendo as outras áreas.

Estas das áreas são muito parecidas porque, de facto, são o mesmo componente do Kirigami: o Kirigami.OverlayDrawer . Algumas propriedades deste componente a ter em mente:

O Popup.modal controla se a área será global ou incorporada, dependendo deste valor booleano
O Drawer.edge controla em qual dos extremos da janela da aplicação a área irá aparecer; as opções para esta propriedade são Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge e Qt.LeftEdge, fazendo parte do tipo enumerado Edge
O Popup.contentItem contém o componente que irá formar o conteúdo da sua área

import QtQuick.Controls 2.15 as Controls

Kirigami.Page {

    Kirigami.OverlayDrawer {
        id: bottomDrawer
        edge: Qt.BottomEdge
        // Configure o `modal` como falso para tornar esta área incorporada!
        modal: true

        contentItem: RowLayout {
            Layout.fillWidth: true

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

    Controls.Button {
        text: "Open bottomDrawer"
        onClicked: bottomDrawer.open()
    }
}

Área incorporada no extremo inferior do ecrã

Um caso de uso para áreas inferiores sobrepostas: NeoChat

O NeoChat usa áreas sobrepostas inferiores para fornecer ao utilizador um conjunto de acções que eles poderão executar sobre uma mensagem na qual tenham carregado de forma prolongada. Este é um exemplo simplificado do que iria aparecer:

Kirigami.Page {

    ListView {
        model: App.MessageModel
        delegate: MessageDelegate {
            onPressAndHold: bottomDrawer.open()
        }
    }

   Kirigami.OverlayDrawer {
       id: bottomDrawer
       height: popupContent.implicitHeight
       edge: Qt.BottomEdge
       padding: 0
       leftPadding: 0
       rightPadding: 0
       bottomPadding: 0
       topPadding: 0

       parent: applicationWindow().overlay

       ColumnLayout {
           id: popupContent
           width: parent.width
           spacing: 0
           
           // Informação da mensagem
           ...
           
           // Acções da mensagem
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}

Cartões

Folhas sobrepostas