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 cosa! Només assegureu-vos primer de prestar 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 proporciona 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 diferents pantalles d'una aplicació. Voldreu tenir una pàgina dedicada a aspectes específics de la interacció amb la vostra aplicació, i podreu crear diferents fitxers en QML, cadascun dels quals contindrà el codi per a pàgines separades.

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

// 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!")
        }
    }
}

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 substituirà a la nostra Kirigami.Page.

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