Files de pàgines i piles de pàgines
Una fila de pàgines
Fins ara hem vist que un dels components principals d'una finestra del Kirigami és un Kirigami.Page . Una sola pàgina pot envoltar tota la pantalla de l'aplicació, o es pot mostrar juntament amb altres pàgines al mateix temps, si hi ha espai.
Quan s'afegeix una pàgina, o s'empeny, apareix a la dreta de les pàgines existents, formant una fila. Aquesta fila de pàgines es pot gestionar amb el que s'anomena correctament Kirigami.PageRow .
Una fila de pàgina mínima amb una única pàgina hauria de ser així:
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"
}
}
}
}
Una sola pàgina amb color blau clar per a mostrar les dimensions de la pàgina
Aquí es poden fer dues millores. El primer és que, amb
initialPage
, podem establir que mainPage sigui la primera pàgina que aparegui a la fila de la pàgina, i que les seves dimensions siguin gestionades per la fila de la pàgina en lloc de fer-ho a través d'ancoratges, posicionadors o disposicions manuals. El segon és tenir una barra d'eines, que es pot establir definint un estil d'eines amb
globalToolBar.style
. Hi ha alguns estils que podem triar, però continuarem amb el
Kirigami.ApplicationHeaderStyle.Auto
per ara.
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"
}
}
}
}
Una sola pàgina amb barra d'eines i color blau clar per a mostrar les dimensions de la pàgina
Només hi ha dues maneres d'afegir pàgines a una fila de pàgina: establint la seva initialPage (que opcionalment pot prendre una matriu de pàgines) o utilitzant push() . Per a suprimir una pàgina de la fila de pàgina, haureu d'utilitzar pop() , mentre que goBack() o goForward() es pot utilitzar per a navegar entre les pàgines.
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 amb un color blau clar
En fer clic a "Push!", apareix una segona pàgina de color verd clar
La pila de pàgines de l'aplicació
Si un
Kirigami.PageRow
amb una barra d'eines us sembla familiar, és perquè l'heu vist abans. Una
ApplicationWindow.pageStack
no és més que una fila de pàgina global molt útil. Cada funció disponible per a una PageRow també està disponible per a pageStack.
L'exemple anterior es pot reduir significativament amb una pageStack, amb la bonificació afegida de les accions de navegació:
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()
}
}
}
}
}
En general, voldreu utilitzar una pageStack en lloc d'implementar la vostra
PageRow
, especialment quan la vostra aplicació es fa més gran i necessiteu els vostres components residint en fitxers separats. Si creeu la finestra al vostre main.qml utilitzant un
Kirigami.ApplicationWindow
, un component que resideix en un altre fitxer encara pot invocar directament la pageStack global mitjançant una crida a la
applicationWindow()
:
// "main.qml"
import org.kde.kirigami 2.20 as Kirigami
Kirigami.ApplicationWindow {
width: 700
height: 400
pageStack.initialPage: BasicPage {}
}
i
// "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!"
}
}
}
}
}
En fer clic al botó s'empeny una pàgina nova amb l'ajuda d'«applicationWindow»