Explicando páginas

Nosso aplicativo

No tutorial anterior, conseguimos configurar, construir e compilar nosso primeiro aplicativo Kirigami. Com o básico estabelecido, podemos começar nossa jornada em direção à criação de um aplicativo completo.

Esses tutoriais se concentrarão na criação de um aplicativo que permite ao usuário ver quantos dias faltam para um evento de sua escolha.

Também recomendamos que você confira a Galeria Kirigami, que fornece vários exemplos úteis de IU.

Nesta seção, vamos nos concentrar nas páginas, um dos principais elementos estruturais de qualquer aplicativo Kirigami.

Páginas

Aplicativos Kirigami são normalmente organizados em páginas usando Kirigami.Page. Páginas são as diferentes "telas" de um aplicativo. Você vai querer ter uma página dedicada a aspectos específicos da interação do seu aplicativo e, para facilitar, você pode criar diferentes arquivos QML para cada página.

As páginas são organizadas em uma pilha de páginas onde podem ser empurradas e removidas. Em um celular, apenas a página mais acima é exibida, enquanto em uma tela maior (desktop ou tablet), se desejado, várias páginas podem ser exibidas uma ao lado da outra.

Vamos voltar ao arquivo Main.qml que criamos em 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
26
27
28
29

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

// Provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
    // Unique identifier to reference this object
    id: root

    width: 400
    height: 300

    // Window title
    // i18nc() makes a string translatable
    // and provides additional context for the translators
    title: i18nc("@title:window", "Hello World")

    // Set the first page that will be loaded when the app opens
    // This can also be set to an id of a Kirigami.Page
    pageStack.initialPage: Kirigami.Page {
        Controls.Label {
            // Center label horizontally and vertically within parent object
            anchors.centerIn: parent
            text: i18n("Hello World!")
        }
    }
}

Fizemos com que nosso aplicativo inicie nossa Kirigami.Page. Tudo o que incluímos nele é um rótulo contendo "Hello World", mas vamos dar uma melhorada nas coisas.

A ideia por trás do nosso aplicativo é que seremos capazes de exibir várias contagens regressivas para o usuário. O problema com uma Kirigami.Page normal é que ela tem um tamanho vertical fixo, então em vez disso, podemos usar uma Kirigami.ScrollablePage, que já vem com sua própria barra de rolagem integrada.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    id: root

    width: 400
    height: 300

    title: i18nc("@title:window", "Day Kountdown")

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

As páginas Kirigami também apresentam títulos organizados na barra de ferramentas, indicando rapidamente ao usuário em qual página ele está. Tudo o que precisamos fazer é definir um título de página usando a propriedade title de Kirigami.ScrollablePage. Neste caso, usamos uma das funções i18nc() que exploramos em nosso tutorial anterior para esse fim.

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