Adicionar acções
Recapitulação
Até agora, conseguimos criar uma aplicação simples que mostra cartões. Contudo, não temos nenhuma forma de adicionar cartões novos à nossa de área de cartões.
Neste tutorial, iremos ver as acções do Kirigami. Estas ajudá-lo-ão a adicionar interactividade à nossa aplicação de uma forma consistente, rápida e acessível.
Acções
Uma Kirigami.Action encapsula uma acção da interface do utilizador. Podemos usá-las para oferecer às nossas aplicações acções fáceis de aceder e que são essenciais à sua funcionalidade.

Acções da página no computador

Acções da página num dispositivo móvel
Se tiver usado antes as aplicações do Kirigami, provavelmente já interagiu com as acções do Kirigami. Nesta imagem, poderemos ver as acções à direita do título da página com vários ícones. As acções do Kirigami poderão ser apresentadas de várias formas e poderão efectuar uma grande variedade de acções.
Adicionar contagens decrescentes
Uma aplicação de contagens decrescentes sem a capacidade de adicionar contagens é bastante inútil. Iremos criar uma acção que nos permite fazer isso.
pageStack.initialPage: Kirigami.ScrollablePage {
...
actions.main: Kirigami.Action {
id: addAction
icon.name: "list-add"
text: i18nc("@action:button", "Add kountdown")
onTriggered: kountdownModel.append({
name: "Kirigami Action added card!",
description: "Congratulations, your Kirigami Action works!",
date: 1000
})
}
...
}
Estamos a colocar a nossa acção do Kirigami dentro da nossa página principal com base nos nossos tutoriais. Se o quiséssemos, poderíamos adicionar mais acções à nossa página (e mesmo associar acções dentro de acções!). Os componentes
Kirigami.Action
são usados como acções de contexto dentro das páginas do Kirigami. Estamos a configurar esse valor de forma específica na propriedade
actions.main
da
Kirigami.Page
: o objecto actions
tem propriedades que nos deixam definir acções diferentes em posições diferentes; contudo, dado que a nossa acção "Adicionar uma contagem" é algo tão central na nossa interface, estamos a configurá-lo como acção principal desta página.
As propriedades id
e text
deverão ser familiares dos tutoriais anteriores. Contudo, a nova propriedade Action.icon deverá ser interessante: é um objecto com várias propriedades que lhe permitirão mostrar certos ícones para as suas acções. Felizmente, para usar os ícones do KDE, tudo o que é preciso fazer é configurar a propriedade 'name' com a propriedade do ícone, icon.name
.
Nota
O Cuttlefish é uma aplicação do KDE que lhe permite ver todos os ícones que poderá usar para a sua aplicação. A mesma oferece um conjunto de funcionalidades úteis, como as antevisões da sua aparência com os vários itens instalados, antevisões com vários tamanhos, etc. Poderá concluir que é uma ferramenta útil para decidir quais os itens a usar na sua aplicação.
Muitos dos ícones do KDE seguem a especificação do FreeDesktop para nomes de ícones. Como tal, poderá querer consultar a página Web do projecto FreeDesktop, o qual contém todos os nomes de ícones compatíveis com os vários ambientes de trabalho.
A propriedade onTriggered é a mais importante. É o que a nossa acção irá fazer quando for usada. Irá reparar que, no nosso exemplo, estamos a usar o método kountdownModel.append que criámos no nosso tutorial anterior. Este método permite-nos adicionar um novo elemento ao nosso modelo de lista. Estamos a passar-lhe um objecto que tem as propriedades relevantes para as nossas contagens decrescentes (nome, descrição e uma data substituta).

De cada vez que carregamos no nosso botão "Adicionar uma contagem" em cima e à direita, é adicionada a nossa contagem decrescente personalizada.

Versão para dispositivos móveis
Área global
Reparou nessas três linhas a seguir ao título da página na imagem anterior? Isso é um menu em hambúrguer que abre uma Kirigami.GlobalDrawer . As áreas globais são úteis para a navegação global e para as acções: por outras palavras, essas coisas que poderá precisar de usar em toda a sua aplicação. Iremos criar uma área global simples que inclua um botão para "sair".
Kirigami.ApplicationWindow {
id: root
...
globalDrawer: Kirigami.GlobalDrawer {
isMenu: true
actions: [
Kirigami.Action {
text: i18n("Quit")
icon.name: "gtk-quit"
shortcut: StandardKey.Quit
onTriggered: Qt.quit()
}
]
}
...
}
Agora iremos colocar a nossa área global dentro da janela da nossa aplicação. A propriedade principal que precisa de prestar atenção é a GlobalDrawer.actions , que tem a forma de uma lista de componentes Kirigami.Action . Esta acção tem um ícone apropriado e invoca a função Qt.quit() , fechando a aplicação.
Dado que estamos a manter a nossa área global simples por agora, vamos configurar a propriedade GlobalDrawer.isMenu como verdadeira. Isto mostra a nossa área global como um menu da aplicação normal, ocupando menos espaço que a a área global predefinida.

Área global

Área global como um menu
Nota
A página de componentes baseados em Action's da secção de 'Componentes' desta documentação oferece mais detalhes sobre as acções do Kirigami e como podem ser usadas.A nossa aplicação até agora
|
|