Vrstice strani in skladi strani

Dodajanje toka v aplikacijo: dodajanje, odstranjevanje in zamenjava strani na različne načine

Vrstica strani

Do sedaj smo videli, da je ena od osnovnih komponent okna Kirigami stran Kirigami.Page . Ena stran lahko ovije celotni zaslon aplikacije, ali pa jo lahko prikazujemo skupaj z drugimi stranmi, če je še prostor.

Kadar koli je stran dodana ali potisnjena, se pojavi desno od obstoječih strani in tvori vrstico. To vrstico strani lahko upravljate z ustrezno naslovljeno vrsto strani Kirigami.PageRow .

Minimalna vrstica strani z eno stranjo bi lahko bila videti tako:

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

Ena sama stran s svetlo modro barvo, ki prikazuje dimenzije strani

Tu lahko naredimo dve izboljšavi. Prva je, da lahko z začetno stranjo initialPage , nastavimo dve lastnosti glavne strani, da je mainPage prva stran, ki se pokaže v vrstici strani in njene dimenzije upravlja vrstica strani namesto ročni anchors, positioners ali layouts. Druga izboljšava je, da imamo orodno vrstico, ki jo lahko določimo s slogom orodne vrstice z globalToolBar.style . Obstaja na izbiro nekaj slogov, za zdaj bomo uporabili Kirigami.ApplicationHeaderStyle.Auto .

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

Ena stran z orodno vrstico in svetlo modro barvo, ki prikazuje dimenzije strani

V vrstici strani obstajata samo dva načina dodajanja strani: z nastavitvijo njene začetne strani initialPage (ki neobvezno lahko prevzame vektor strani) ali z uporabo funkcije push() . Za brisanje strani iz vrstice strani , uporabite funkcijo pop() , kjer lahko uporabite še goBack() ali goForward() za navigacijo med stranmi.

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

Ko kliknete "Push!", se prikaže druga stran s svetlo zeleno barvo

Sklad strani aplikacije

Če se vam zdi Kirigami.PageRow z orodno vrstico že znan, je to ker ste to že videli prej. Sklad ApplicationWindow.pageStack ni nič drugega kot zelo priročna globalna vrstica strani. Vsaka funkcija, ki je na voljo za PageRow je tudi na voljo za pageStack.

Prejšnji primer je mogoče znatno zmanjšati s pageStack z dodanim bonusom dejavnosti navigacije:

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

Na splošno boste želeli uporabiti "pageStack", namesto da bi implementirali svojo vrstico PageRow , še posebej, ko postane vaša aplikacija večja in je potrebno, da vaše komponente živijo v posameznih datotekah. Če ustvarite vaše okno v vašem main.qml z uporabo Kirigami.ApplicationWindow , lahko komponenta iz druge datoteke še vedno neposredno kliče globalnega pageStack s klicem applicationWindow() :

// "main.qml"
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    width: 700
    height: 400
    pageStack.initialPage: BasicPage {}
}

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

Klik na gumb potisne novo stran s pomočjo applicationWindow

Komponente, ki temeljijo na dejanjih

Drseče strani in pogledi seznama