Riadky stránok a zásobníky stránok

Pridajte tok do vašej aplikácie: Pridávajte, odstraňujte a nahrádzajte stránky rôznymi spôsobmi

Riadok stránok

Doteraz sme videli, že jedným z hlavných komponentov okna Kirigami je Kirigami.Page. Jedna stránka môže obaliť celú obrazovku aplikácie, alebo sa môže zobraziť spolu s inými stránkami naraz, ak je k dispozícii priestor.

Kedykoľvek sa stránka pridá, alebo vloží, objaví sa napravo od existujúcej stránky (stránok), čím tvorí riadok. Tento riadok stránok sa dá spravovať výstižne nazvaným Kirigami.PageRow.

Minimálny riadok stránok s jednou stránkou by mohol vyzerať takto:

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"
            }
        }
    }
}

Jedna stránka so svetlomodrou farbou na zobrazenie rozmerov stránky

Tu sa dajú vykonať dve vylepšenia. Prvé je, že pomocou initialPage môžeme nastaviť mainPage ako prvú stránku, ktorá sa zobrazí v riadku stránok, a nechať jej rozmery spravovať riadkom stránok namiesto manuálnych kotiev, pozicionérov alebo rozložení. Druhé je mať panel nástrojov, ktorý sa dá nastaviť definovaním štýlu panela nástrojov pomocou globalToolBar.style. Existuje niekoľko štýlov, z ktorých si môžeme vybrať, ale zatiaľ použijeme Kirigami.ApplicationHeaderStyle.Auto.

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"
            }
        }
    }
}

Jedna stránka s nástrojovou lištou a svetlomodrou farbou na zobrazenie rozmerov stránky

Existujú iba dva spôsoby pridávania stránok do riadku stránok: nastavením jeho initialPage (ktorá môže voliteľne prijať pole stránok) alebo pomocou push(). Na odstránenie stránky z riadku stránok by ste mali použiť pop(), zatiaľ čo goBack() alebo goForward() sa dajú použiť na navigáciu medzi stránkami.

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()
                    }
                }
            }
        }
    }
}

Počiatočná stránka so svetlomodrou farbou

Po kliknutí na "Push!" sa zobrazí druhá stránka so svetlozelenou farbou

Zásobník stránok aplikácie

Ak vám Kirigami.PageRow s panelom nástrojov príde povedomý, je to preto, že ste ho už videli. ApplicationWindow.pageStack nie je nič iné ako veľmi pohodlný globálny riadok stránok. Každá funkcia dostupná pre PageRow je tiež dostupná pre pageStack.

Predchádzajúci príklad sa dá výrazne zjednodušiť pomocou pageStack, s pridaným bonusom navigačných akcií:

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()
                }
            }
        }
    }
}

Vo všeobecnosti budete chcieť použiť pageStack namiesto implementácie vlastného PageRow, najmä keď sa vaša aplikácia zväčší a potrebujete, aby vaše komponenty žili v samostatných súboroch. Ak vytvoríte okno vo vašom Main.qml pomocou Kirigami.ApplicationWindow, komponent nachádzajúci sa v inom súbore môže stále priamo vyvolať globálny pageStack pomocou volania 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 {}
}

// "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!"
                }
            }
        }
    }
}

Kliknutie na tlačidlo pridá novú stránku s pomocou applicationWindow

Komponenty

Posúvateľné stránky a zobrazenia zoznamov