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

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

Separadores
Os separadores permitem-lhe mostrar um título e um ícone no topo da sua área global (mais acima do cabeçalho).
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"
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()
}
]
}

Nota
A propriedadetitleIcon
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 do KDE, ou consultando a especificação de nomes de ícones do FreeDesktop.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).
Á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 na 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
modal
controla se a área será global ou incorporada, dependendo deste valor booleano - O
edge
controla em qual dos extremos da janela da aplicação a área irá aparecer; as opções para esta propriedade sãoQt.TopEdge
,Qt.RightEdge
,Qt.BottomEdge
eQt.LeftEdge
- O
contentItem
contém o componente que irá formar o conteúdo da sua área
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
Kirigami.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()
}
}
<figure class="text-center"><img src="modal_drawer.png"
alt="Área modal no extremo inferior do ecrã."/><figcaption>
<p>Área modal no extremo inferior do ecrã.</p>
</figcaption>

Á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();
}
}
...
}
}
}