Explicação das Páginas
A nossa aplicação
No tutorial anterior, conseguimos configurar, criar e compilar a nossa primeira aplicação em Kirigami. Com as bases instaladas, poderemos iniciar a nossa viagem para a criação de uma aplicação cheia de funcionalidades.
Estes tutoriais focar-se-ão na criação de uma aplicação que permite ao utilizador ver quantos dias faltam até à chegada de um evento à sua escolha. Isto não significa que você não se deva desviar e tentar criar as suas próprias coisas! Simplesmente preste atenção à forma como as coisas funcionam primeiro, podendo depois ajustar essas coisas de forma diferente no seu próprio código. Também recomendamos que consulte a Galeria do Kirigami, que oferece um conjunto de exemplos úteis de interfaces, com acesso fácil a todo o código.
Nesta secção focar-nos-emos nas páginas, um dos elementos-chave estruturais de qualquer aplicação de Kirigami.
Páginas
As aplicações do Kirigami normalmente estão organizadas em Pages (páginas). Estes são os diferentes "ecrãs" de uma aplicação. Irá querer ter uma página dedicada a aspectos específicos da interacção com a sua aplicação, e poderá criar ficheiros QML diferentes, contendo cada um o código para as páginas separadas.
As páginas estão organizadas numa pilha de páginas onde se poderão inserir e retirar páginas. Num telemóvel, só a página de topo é que aparece, enquanto que num ecrã maior (computador ou 'tablet') poderão ser vistas várias páginas umas a seguir às outras.
Nota
O KDE tem uma página útil com as Linhas-Mestras de Interfaces Humanas (HIG) que entra em detalhe sobre como desenhar melhor a sua aplicação. Os guias nela existentes irão ajudar a garantir que a sua aplicação se mantém fácil de usar, consistente e agradável a nível estético.
Uma Kirigami.Page herda de uma Controls.Page e, como tal, poderá usar as propriedades da última da mesma forma.
Voltemos ao ficheiro main.qml
que criámos no nosso tutorial anterior:
|
|
Faremos com que a nossa aplicação comece com a nossa Kirigami.Page . Tudo o que temos incluído nela é um texto que diz 'Hello World', mas iremos apurar as coisas um pouco mais.
A ideia por trás da nossa aplicação é que seremos capazes de mostrar um conjunto de contagens decrescentes ao utilizador. O problema com uma Kirigami.Page normal é que a mesma tem um tamanho vertical fixo, mas não se preocupe: o Kirigami também suporta páginas com deslocamento. A Kirigami.ScrollablePage irá substituir agora a nossa página principal.
Aviso
Se já tiver avançado no tutorial, poderá já ter reparado que existe uma coisa chamada ScrollView , que poderá usar para conter os seus componentes. Contudo, NÃO ponha umaScrollView
dentro de uma ScrollablePage
, dado que isto poderá causar problemas. Os filhos de uma ScrollablePage
já estão a nível funcional dentro de uma ScrollView
.
|
|
As páginas do Kirigami também possuem títulos bonitos dentro da barra de ferramentas, que indicam rapidamente ao utilizador em que página ele se encontra. Tudo o que tem a fazer é definir um título para a página com a propriedade title
do
Kirigami.ScrollablePage
. Neste caso, foi usada uma das funções i18nc()
que explorámos no nosso tutorial anterior para este fim.
Nota
Também poderá optar por definir a sua página dentro do seu próprio documento QML. Para o fazer, iria criar o novo documento em QML, por exemplo "startPage.qml", adicioná-lo ao seu ficheiro resources.qrc
e configurar a primeira página para o carregar, como por exemplo:
pageStack.initialPage: Qt.resolvedUrl("StartPage.qml")
O pageStack.initialPage
define a Page inicial da pilha de páginas, e o
Qt.resolvedUrl
irá converter o URL relativo do ficheiro QML para um absoluto.
Existe mais informações sobre estruturas alternativas de páginas dentro da nossa documentação do Kirigami.