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.

Voltemos ao ficheiro main.qml que criámos no nosso tutorial anterior:

 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

// Includes relevant modules used by the QML
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami

// Base element, provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
    // ID provides unique identifier to reference this element
    id: root

    // Window title
    // i18nc is useful for adding context for translators, also lets strings be changed for different languages
    title: i18nc("@title:window", "Hello World")

    // Initial page to be loaded on app load
    pageStack.initialPage: Kirigami.Page {

        Controls.Label {
            // Center label horizontally and vertically within parent element
            anchors.centerIn: parent
            text: i18n("Hello World!")
        }
    }
}

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 Kirigami.Page.

Kirigami.ScrollablePage {
    title: i18nc("@title", "Kountdown")
    ...
}

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.

pageStack.initialPage: Qt.resolvedUrl("StartPage.qml")