Paginarijen en paginastapels

De PageRow

De PageRow is een container die items horizontaal indeelt in een rij. Als alle kinditems niet in de PageRow passen, zal het zich gedragen als een Flickable oppervlak en zal een horizontaal verschuifbare weergave van kolommen worden.

Een PageRow kan een enkele pagina of verschillende ervan tonen als kolommen, afhankelijk van de vensterbreedte. Op een telefoon zal een enkele kolom zichtbaar zijn, terwijl op een tablet of een desktop meer dan één kolom tegelijk zichtbaar zou moeten zijn.

De kolommen kunnen ofwel allemaal dezelfde vaste grootte hebben, zelf hun grootte bepalen met implicitWidth of automatisch zich uitbreiden om alle beschikbare breedte in te nemen. Standaard zal de laatste kolom zich uitbreiden om alle beschikbare ruimte in te nemen.

U hebt toegang tot de kolomweergavemethoden vanuit de eigenschap pageStack van uw Kirigami.ApplicationWindow element of vanuit overal elders met applicationWindow().pageStack.

De initiële pagina wordt toegevoegd met de eigenschap pageStack.initialPage. Als voorbeeld: in een eenvoudige toepassing die de gebruiker om authenticatie vraagt, zou de initiële pagina een aanmeldpagina zijn.

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

Nadat de gebruiker zich in de toepassing heeft aangemeld, zou u de aanmeldpagina moeten vervangen door de homepagina van de toepassing. Om dat te doen, zou u pageStack.replace moeten gebruiken, waarmee de LoginPage vervangen wordt door een HomePage.

// LoginPage.qml
Kirigami.Page {
    // aanmeldformulier

    Button {
        onClicked: {
            const user = Backend.authentificate(usernameField.text, passwordField.text);
            if (user) {
                applicationWindow().pageStack.replace("qrc:/HomePage.qml", {
                    user: user, // geef de geregistreerde gebruikersinformatie aan de homepagina
                });
            } else {
                // foutmelding tonen
            }
        }
    }
}

Stel eens voor dat u een configuratiepagina hebt waarvan u wilt dat de gebruiker deze vanaf de HomePage kan bereiken. U wilt dat de gebruiker terug gaat naar de HomePage, u kunt dus replace niet gebruiken. In plaats daarvan, zou u push moeten gebruiken om een nieuwe pagina op de stapel te zetten.

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

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

U kunt ook:

• pop een pagina (die de laatste pagina op de stapel verwijdert) of
• gebruik insertPage om een pagina op een specifieke positie in de stapel te zetten,
• gebruik movePage om specifieke pagina's binnen de stapel te verplaatsen of
• wissen van alle pagina's op de stapel.

U kunt ook currentIndex wijzigen om de nu actieve pagina programmatisch wijzigen of gebruik flickBack om te simuleren dat een pagina terug op de stapel wordt geplaatst.

Lagen

Voor nu zagen we alleen horizontale navigatie werken in een tweedimensionale stapel. U kunt ook lagen in uw toepassing gebruiken om een volledig-scherm pagina in uw toepassing te zetten.

In dat geval is slechts één pagina tegelijk zichtbaar op de mobiel en op de desktop.

De lagen zijn toegankelijk vanaf pageStack.layers en gebruiken dezelfde API als pageStack.