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
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"
}
}
}
}
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
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"
}
}
}
}
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
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()
}
}
}
}
}
}
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
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 general you'll want to use a pageStack rather than implement your own PageRow, especially when your application gets bigger and you need your components living in separate files. If you create your window in your Main.qml using a Kirigami.ApplicationWindow, a component residing in another file can still directly invoke the global pageStack by means of a call to the 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 {}
}e
// "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!"
}
}
}
}
}
Se carregar no botão, irá sobrepor uma nova página com a ajuda da 'applicationWindow'