Files de pàgines i piles de pàgines

La «PageRow»

La PageRow és un contenidor que col·loca els elements horitzontalment en una fila. Si tots els elements fills no caben a la PageRow, es comportarà com una superfície Flickable i es convertirà en una vista de columnes desplaçable horitzontalment.

Una PageRow pot mostrar una sola pàgina o diverses com a columnes, depenent de l’amplada de la finestra. En un telèfon, es podria veure una sola columna, mentre que en una tauleta o un ordinador d’escriptori, es veuran més d’una columna alhora.

Les columnes poden tenir totes la mateixa mida fixa, dimensionar-les amb impllicitWidth o expandir-les automàticament per a ocupar tota l’amplada disponible. De manera predeterminada, l’última columna s’expandirà per a ocupar tot l’espai disponible.

Podeu accedir als mètodes de vista de columna des de la propietat pageStack del vostre element Kirigami.ApplicationWindow o des de qualsevol altre lloc emprant applicationWindow().pageStack.

La pàgina inicial s’afegeix amb la propietat pageStack.initialPage. Com a exemple: en una aplicació senzilla que requereixi que l’usuari s’autentiqui, la pàgina inicial seria una pàgina d’inici de sessió.

Kirigami.ApplicationWindow {
    pageStack.initialPage: LoginPage {}
}

Una vegada l’usuari hagi iniciat la sessió, haureu de substituir la pàgina d’inici de sessió amb la pàgina inicial de l’aplicació. Per a fer això, empraríem pageStack.replace, eliminant la LoginPage i substituint-la amb una HomePage.

// LoginPage.qml
Kirigami.Page {
    // formulari d'inici de sessió

    Button {
        onClicked: {
            const user = Backend.authentificate(usernameField.text, passwordField.text);
            if (user) {
                applicationWindow().pageStack.replace("qrc:/HomePage.qml", {
                    user: user, // proporciona la informació de l'usuari registrat a la pàgina
                                // d'inici
                });
            } else {
                // mostra el missatge d'error
            }
        }
    }
}

Ara imaginem que teniu una pàgina de configuració a la qual voleu que l’usuari accedeixi des de la pàgina inicial. Voleu que l’usuari torni a la pàgina inicial, de manera que no podreu emprar replace. En el seu lloc, emprarem push per a inserir una pàgina nova en la pila.

// ConfigurationPage.qml
Kirigami.Page {
    required property string var1
}

// HomePage.qml
applicationWindow().pageStack.push("qrc:/MyPage.qml", {
    'var1': 'Hello',
});

També podeu veure:

• pop una pàgina (la qual elimina l’última pàgina de la pila) o
• empreu insertPage per a inserir una pàgina en una posició específica a la pila,
• empreu movePage per a moure pàgines específiques dins de la pila, o
• netegeu totes les pàgines de la pila.

També podeu modificar currentIndex per a canviar la pàgina actualment activa mitjançant la programació, o emprar flickBack per a simular moure una pàgina cap enrere en la pila.

Capes (Layer)

De moment, només hem vist la navegació horitzontal funcionant en una pila bidimensional. També podeu emprar capes a l’aplicació per a inserir-hi una pàgina de pantalla completa.

En aquest cas, només estarà visible una pàgina alhora en el dispositiu mòbil i a l’escriptori.

Les capes són accessibles des d’una pageStack.layers i utilitzen la mateixa API que pageStack.