Linhas de páginas e pilhas de páginas
Uma linha de páginas
Vimos até agora que um dos principais componentes de uma janela Kirigami é uma Kirigami.Page. Uma única página pode envolver toda a tela do aplicativo ou pode ser exibida junto com outras páginas ao mesmo tempo, se houver espaço.
Sempre que uma página é adicionada ou enviada, ela aparece à direita da(s) página(s) existente(s), formando uma linha. Essa linha de páginas pode ser gerenciada com o apropriadamente chamado Kirigami.PageRow.
Uma linha de página mínima com uma única página poderia ter esta aparência:
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 cor azul claro para mostrar as dimensões da página
Há duas melhorias que podem ser feitas aqui. A primeira é que, com initialPage, podemos definir mainPage como a primeira página que aparece na linha da página e ter suas dimensões gerenciadas pela linha da página em vez de âncoras, posicionadores ou layouts manuais. A segunda é ter uma barra de ferramentas, que pode ser definida definindo um estilo de barra de ferramentas com globalToolBar.style. Existem alguns estilos que podemos escolher, mas usaremos Kirigami.ApplicationHeaderStyle.Auto por enquanto.
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 barra de ferramentas e cor azul claro para mostrar as dimensões da página
Existem apenas duas maneiras de adicionar páginas a uma linha de página: definindo sua initialPage (que pode, opcionalmente, receber um array de páginas) ou usando push(). Para excluir uma página da linha de página, você deve usar pop(), enquanto 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 cor azul claro
Ao clicar em "Push!", uma segunda página com cor verde claro aparece
A pilha de páginas do aplicativo
Se uma Kirigami.PageRow com uma barra de ferramentas lhe parece familiar, é porque você já o viu antes. Um ApplicationWindow.pageStack nada mais é do que uma linha de página global muito conveniente. Todas as funções disponíveis para um PageRow também estão disponíveis para o pageStack.
O exemplo anterior pode ser reduzido significativamente com um pageStack, com o bônus adicional de açõ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()
}
}
}
}
}
Em geral, você vai querer usar um pageStack em vez de implementar seu próprio PageRow, especialmente quando seu aplicativo fica maior e você precisa que seus componentes fiquem em arquivos separados. Se você criar sua janela em Main.qml usando um Kirigami.ApplicationWindow, um componente que reside em outro arquivo ainda pode invocar diretamente o global pageStack por meio de uma chamada à função 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!"
}
}
}
}
}
Clicar no botão abre uma nova página com a ajuda do applicationWindow