Explicar les pàgines

La nostra aplicació

A la guia d'aprenentatge anterior, hem aconseguit configurar, construir i compilar la nostra primera aplicació escrita amb el Kirigami. Amb els conceptes bàsics en el seu lloc, podem començar el nostre viatge cap a la creació d'una aplicació amb totes les característiques.

Aquestes guies d'aprenentatge se centraran a crear una aplicació que permeti a l'usuari veure quants dies queden fins a un esdeveniment de la seva elecció.

També us recomanem que consulteu la Kirigami Gallery, que proporciona una sèrie d'exemples útils d'interfície d'usuari.

En aquesta secció ens centrarem en les pàgines, un dels elements estructurals clau de qualsevol aplicació escrita amb el Kirigami.

Pàgines

Les aplicacions escrites amb el Kirigami solen estar organitzades en Kirigami.Page. Les pàgines són les «pantalles» diferents d'una aplicació. Voldreu tenir una pàgina dedicada a aspectes específics de la interacció amb la vostra aplicació, i per a facilitar les coses podreu crear fitxers QML diferents, un per a cada pàgina.

Les pàgines estan organitzades en una pila de pàgines on es podran empènyer i fer aparèixer. En un telèfon només es mostrarà la pàgina superior, mentre que en una pantalla més gran (escriptori o tauleta), si es desitja, es podran mostrar diverses pàgines una al costat de l'altra.

Tornem al fitxer Main.qml que hem creat en la nostra guia d'aprenentatge 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!")
        }
    }
}

Fem que la nostra aplicació comenci a la nostra Kirigami.Page. Tot el que hi hem inclòs és una etiqueta que conté «Hello World», però arreglarem una mica les coses.

La idea darrere de la nostra aplicació és que podrem mostrar a l'usuari un munt de comptes enrere. El problema amb una Kirigami.Page normal és que té una mida vertical fixa, així que en el seu lloc farem servir una Kirigami.ScrollablePage, que ja ve amb la seva pròpia barra de desplaçament 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")
    }
}

Les pàgines escrites amb el Kirigami també compten amb títols niuats col·locats dins de la barra d'eines, indicant ràpidament a l'usuari en quina pàgina es troba. Tot el que necessitem fer per a establir un títol de pàgina és emprar la propietat title de la Kirigami.ScrollablePage. En aquest cas, per a aquesta finalitat utilitzarem una de les funcions i18nc() que hem explorat en la nostra guia d'aprenentatge anterior.

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