Linhas da página e pilhas de páginas

Adicionar fluxos: Adicionar, remover e substituir as páginas de diferentes formas

Uma fila de páginas

Vimos até agora que um dos componentes básicos de uma janela do Kirigami é uma Kirigami.Page . Uma única página consegue conter o ecrã inteiro da aplicação, ou poderá ser apresentada em conjunto com outras páginas ao mesmo tempo, caso haja espaço.

Sempre que for adicionada uma página, ou colocada por cima, aparece à direita das páginas existentes, formando uma fila. Esta fila de páginas pode ser gerida com um Kirigami.PageRow devidamente atribuído.

Uma linha da página mínima com uma única página deverá ser semelhante ao seguinte:

import QtQuick 2.15
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    width: 500
    height: 200

    Kirigami.PageRow {
        anchors.fill: parent

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

Uma única página com uma cor azul-clara para mostrar as dimensões da página

Existem duas melhorias que podem ser feitas aqui. A primeira é que, com o initialPage , podemos tanto definir a mainPage como sendo a primeira página que aparece na fila de páginas, como ter as suas dimensões a ser geridas pela fila de páginas, através de âncoras manuais, posicionamentos ou disposições. A segunda é ter uma barra de ferramentas, que poderá ser configurada ao definir um estilo de barras de ferramentas com o globalToolBar.style . Existem alguns estilos que podemos escolher, mas iremos seguir com o Kirigami.ApplicationHeaderStyle.Auto por agora.

import QtQuick 2.15
import org.kde.kirigami 2.20 as Kirigami

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

Uma única página com uma barra de ferramentas e uma cor azul-clara para mostrar as dimensões da página

Existem duas formas de adicionar páginas a uma fila de páginas: configurando a sua initialPage (que pode receber opcionalmente uma lista de páginas) ou usando a operação push() . Para apagar uma página da fila de páginas, deverá usar a operação pop() , enquanto o goBack() ou goForward() podem ser usados para navegar entre páginas.

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

Kirigami.ApplicationWindow {
    width: 500
    height: 200
    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()
                    }
                }
            }
        }
    }
}

Depois de carregar em "Push!" (Sobrepor!), irá aparecer uma segunda página de cor verde-clara

A pilha de páginas da aplicação

Se um Kirigami.PageRow com uma barra de ferramentas parecer familiar para si, é porque já o viu anteriormente. Uma ApplicationWindow.pageStack não é mais que uma fila de páginas globais realmente conveniente. Todas as funções disponíveis numa PageRow também estão disponíveis na pageStack.

O exemplo anterior poderá ser reduzido de forma significativa com uma pageStack, com o bónus adicional das acções de navegação:

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

Kirigami.ApplicationWindow {
    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()
                }
            }
        }
    }
}

De um modo geral, irá querer usar uma pageStack em vez de implementar a sua própria PageRow , especialmente quando a sua aplicação fica cada vez maior e precisa que os seus componentes residam em ficheiros separados. Se criar a sua janela no seu main.qml, usando uma Kirigami.ApplicationWindow , um componente que resida noutro ficheiro consegue à mesma invocar directamente a pageStack global, através de uma chamada à applicationWindow() :

// "main.qml"
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    width: 700
    height: 400
    pageStack.initialPage: BasicPage {}
}

// "BasicPage.qml"
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import org.kde.kirigami 2.20 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!"
                }
            }
        }
    }
}

Se carregar no botão, irá sobrepor uma nova página com a ajuda da 'applicationWindow'

Componentes baseados em acções

Scrollable pages and list views