Linhas da página e pilhas de páginas
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()
}
}
}
}
}
}

Página inicial com uma cor azul-clara

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 {}
}
e
// "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'