Sidrader och sidstaplar
En rad med sidor
Hittills har vi sett att en av kärnkomponenterna i ett Kirigami-fönster är en Kirigami.Page . En enskild sida kan omsluta hela programmets skärm, eller så kan den visas tillsammans med andra sidor samtidigt, om det finns plats.
Så fort en sida läggs till, visas den till höger om de befintliga sidorna och bildar en rad. Raden med sidor kan hanteras med det passande namngivna Kirigami.PageRow .
En minimal sidrad med en enda sida skulle kunna se ut så här:
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"
}
}
}
}
Det finns två förbättringar som kan göras här. Den första är att med initialPage kan vi både ställa in 'mainPage' som den första sidan som visas på sidraden, och låta dess dimensioner hanteras av sidraden istället av via manuella anchors, [positioners](https://doc.qt.io/qt-6/qtquick- positioning-layouts.html) eller layouts. Den andra är att ha en verktygsrad, som kan ställas in genom att definiera en stil för verktygsrader med globalToolBar.style . Det finns några stilar vi kan välja mellan, men vi använder Kirigami.ApplicationHeaderStyle.Auto tills vidare.
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"
}
}
}
}
Det finns bara två sätt att lägga till sidor på en sidrad: genom att ställa in dess initialPage (som valfritt kan använda en uppsättning sidor) eller genom att använda [push()](docs: kirigami2;PageRow::push). För att ta bort en sida från sidraden bör du använda pop() , medan goBack() eller [goForward()] (docs:kirigami2;PageRow::goForward) kan användas för att navigera mellan sidor.
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()
}
}
}
}
}
}
Programmets stapel av sidor
Om en
Kirigami.PageRow
med ett verktygsfält ser bekant ut, beror det på att du har sett det förut. En
ApplicationWindow.pageStack
är inget annat än en mycket bekväm, global sidrad. Varje funktion som är tillgänglig i PageRow
är också tillgänglig i pageStack
.
Det föregående exemplet kan reduceras avsevärt med en pageStack
, med den extra bonusen av navigeringsåtgärder:
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()
}
}
}
}
}
I allmänhet ska man använda en pageStack
snarare än att implementera sin egen
PageRow
, speciellt när programmet blir större och komponenterna måste finnas i separata filer. Om fönstret skapas i main.qml
med en
Kirigami.ApplicationWindow
, kan en komponent som finns i en annan fil fortfarande direkt anropa en global pageStack
genom ett anrop till
applicationWindow()
:
// "main.qml"
import org.kde.kirigami 2.20 as Kirigami
Kirigami.ApplicationWindow {
width: 700
height: 400
pageStack.initialPage: BasicPage {}
}
och
// "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!"
}
}
}
}
}