Righe e pile di pagine

Aggiungi un flusso alla tua applicazione: aggiungi, rimuovi e sostituisci le pagine in modi diversi

Una riga di pagine

Finora abbiamo visto che uno dei componenti principali di una finestra Kirigami è una Kirigami.Page. Una singola pagina può avvolgere l'intero schermo dell'applicazione, oppure può essere visualizzata insieme ad altre pagine contemporaneamente, se c'è spazio.

Ogni volta che una pagina viene aggiunta o spinta, appare a destra delle pagine esistenti, formando una riga. Questa riga di pagine può essere gestita con il nome appropriato Kirigami.PageRow.

Una riga di pagina minima con una singola pagina potrebbe assomigliare a questa:

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Single Page"
    width: 500
    height: 200

    Kirigami.PageRow {
        anchors.fill: parent

        Kirigami.Page {
            id: mainPage
            anchors.fill: parent
            Rectangle {
                anchors.fill: parent
                color: "lightblue"
            }
        }
    }
}

Una singola pagina di colore azzurro per mostrare le dimensioni della pagina

Ci sono due miglioramenti che possono essere apportati qui. Il primo è che, con initialPage, possiamo sia impostare mainPage come prima pagina che appare nella riga della pagina, sia far sì che le sue dimensioni siano gestite dalla riga della pagina anziché tramite anchors manuali), posizionatori o layout. Il secondo è avere una barra degli strumenti, che può essere impostata definendo uno stile della barra degli strumenti con globalToolBar.style. Ci sono alcuni stili tra cui possiamo scegliere, ma per ora utilizzeremo Kirigami.ApplicationHeaderStyle.Auto.

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "With globalToolBar and initialPage"
    width: 500
    height: 200
    Kirigami.PageRow {
        anchors.fill: parent
        globalToolBar.style: Kirigami.ApplicationHeaderStyle.Auto
        initialPage: Kirigami.Page {
            Rectangle {
                anchors.fill: parent
                color: "lightblue"
            }
        }
    }
}

Una pagina singola con barra degli strumenti e colore azzurro per mostrare le dimensioni della pagina

Ci sono solo due modi per aggiungere pagine a una riga di pagina: impostando la sua initialPage (che può facoltativamente prendere un array di pagine) o usando push(). Per eliminare una pagina dalla riga della pagina, dovresti usare pop(), mentre goBack() o goForward() possono essere usati per navigare tra pagine.

import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Multiple pages in a row"
    width: 700
    height: 300
    Kirigami.PageRow {
        id: mainRow
        anchors.fill: parent
        globalToolBar.style: Kirigami.ApplicationHeaderStyle.Auto
        initialPage: Kirigami.Page {
            id: firstPage
            Rectangle {
                anchors.fill: parent
                color: "lightblue"
                Controls.Button {
                    anchors.centerIn: parent
                    text: "Push!"
                    onClicked: mainRow.push(secondPage)
                }
            }
        }

        Component {
            id: secondPage
            Kirigami.Page {
                Rectangle {
                    anchors.fill: parent
                    color: "lightgreen"
                    Controls.Button {
                        anchors.centerIn: parent
                        text: "Pop!"
                        onClicked: mainRow.pop()
                    }
                }
            }
        }
    }
}

Facendo clic su "Push!", viene visualizzata una seconda pagina di colore verde chiaro

Pila di pagine dell'applicazione

Se un Kirigami.PageRow con una barra degli strumenti ti sembra familiare, è perché l'hai già visto prima. Un ApplicationWindow.pageStack non è altro che una riga di pagina globale molto comoda. Ogni funzione disponibile per "PageRow" è disponibile anche per "pageStack".

L'esempio precedente può essere ridotto in modo significativo con un pageStack, con l'ulteriore vantaggio delle azioni di navigazione:

import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Using the pageStack"
    width: 500
    height: 200
    pageStack.initialPage: Kirigami.Page {
            id: firstPage
            Rectangle {
                anchors.fill: parent
                color: "lightblue"
                Controls.Button {
                    anchors.centerIn: parent
                    text: "Push!"
                    onClicked: pageStack.push(secondPage)
                }
            }
        }
        Component {
            id: secondPage
            Kirigami.Page {
                Rectangle {
                    anchors.fill: parent
                    color: "lightgreen"
                    Controls.Button {
                        anchors.centerIn: parent
                        text: "Pop!"
                        onClicked: pageStack.pop()
                }
            }
        }
    }
}

In generale ti consigliamo di utilizzare un pageStack anziché implementare il tuo PageRow, soprattutto quando la tua applicazione diventa più grande e hai bisogno che i tuoi componenti vivano in file separati. Se crei la tua finestra nel tuo Main.qml utilizzando un Kirigami.ApplicationWindow, un componente che risiede in un altro file può comunque invocare direttamente il pageStack globale mediante una chiamata al applicationWindow():

// "Main.qml"
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Pushing a Page from a different QML file"
    width: 700
    height: 400
    pageStack.initialPage: BasicPage {}
}

// "BasicPage.qml"
import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.Page {
    Controls.Button {
        anchors.centerIn: parent
        text: "This pushes page1 from BasicPage\ninto the pageStack from Main.qml!"
        onClicked: {
            applicationWindow().pageStack.push(page1)
        }
        Component {
            id: page1
            Kirigami.Page {
                Controls.Label {
                    anchors.centerIn: parent
                    text: "page1 was pushed!"
                }
            }
        }
    }
}

Facendo clic sul pulsante si apre una nuova pagina con l'aiuto di applicationWindow

Componenti basati sulle azioni

Pagine scorrevoli e viste a elenco