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 en la creació d'una aplicació que permeti a l'usuari veure quants dies queden fins a un esdeveniment de la seva elecció. Això no vol dir que no us pugueu desviar i mirar de crear la vostra pròpia idea! Només assegureu-vos primer de parar molta atenció sobre com funcionen les coses, de manera que pugueu ajustar-ho quan les coses siguin diferents en el vostre propi codi. També us recomanem que consulteu la Galeria de Kirigami, la qual proporciona una sèrie d'exemples útils per a la interfície d'usuari i un fàcil accés a tot el codi.

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 Pàgines . Aquestes 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 diferents en QML, 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) es podran mostrar múltiples 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

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

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

    // 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, però no us preocupeu: el Kirigami també admet pàgines desplaçables. Ara, la Kirigami.ScrollablePage serà la nostra pàgina principal.

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

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    id: root

    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")