Sidrader och sidstaplar

Sidraden

PageRow är en behållare som placerar ut objekt horisontellt på en rad. Om underliggande objekt inte får plats i en PageRow , beter den sig som en Flickable yta och blir en horisontellt rullningsbar vy av kolumner.

PageRow kan visa en enda sida eller flera som kolumner, beroende på fönsterbredden. På en telefon går det att se en enda kolumn, medan på en surfplatta eller skrivbordsdator ska mer än en kolumn vara synlig samtidigt.

Kolumnerna kan antingen ha samma fasta storlek, ändra sin egen storlek med implicitWidth, eller automatiskt expandera för att uppta hela den tillgängliga bredden. Normalt expanderas den sista kolumnen för att uppta hela det tillgängliga utrymmet.

Du kan komma åt kolumnvyernas metoder från egenskapen pageStack i elementet Kirigami.ApplicationWindow eller var som helst genom att använda applicationWindow().pageStack.

Den ursprungliga sidan läggs till med egenskapen pageStack.initialPage. Som exempel skulle den ursprungliga sidan i ett enkelt program som kräver att användaren utför behörighetskontroll, skulle den ursprungliga sidan vara en inloggningssida.

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

När användaren väl har loggat in med programmet, skulle du behöva ersätta inloggningssidan med programmets hemsida. För att göra det, skulle du använda pageStack.replace för att ta bort LoginPage och ersätta den med HomePage.

// LoginPage.qml
Kirigami.Page {
    // inloggningsformulär

    Button {
        onClicked: {
            const user = Backend.authentificate(usernameField.text, passwordField.text);
            if (user) {
                applicationWindow().pageStack.replace("qrc:/HomePage.qml", {
                    user: user, // ge den registrerade användarinteraktionen till hemsidan
                });
            } else {
                // visa felmeddelande
            }
        }
    }
}

Låt oss nu föreställa oss att du har en inställningssida som du vill att användaren ska komma åt från hemsidan. Du skulle vilja att användaren kan gå tillbaka till hemsidan, så du kan inte använda replace. Istället skulle du använda push för att lägga till en ny sida överst i stapeln.

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

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

Du kan också:

• använda pop för en sida (vilket tar bort den sista sidan i stapeln), eller
• använda insertPage för att infoga en sida på en specifik plats i stapeln,
• använda movePage för att flytta specifika sidor inom stapeln, eller
• använda clear för att rensa alla sidor från stapeln.

Du kan också ändra currentIndex för att ändra sidan som är aktiv för närvarande programmatiskt, eller använda flickBack för att simulera att flytta en sida bakåt i stapeln.

Lager

För tillfället har vi bara sett horisontell navigering som fungerar i en tvådimensionell stapel. Du kan också använda lager i ditt program för att lägga till fullskärmssidor i programmet.

I detta fall är bara en sida synlig samtidigt på mobilen och på skrivbordsdatorn.

Lagren är tillgängliga från pageStack.layers och använder samma programmeringsgränssnitt som pageStack.