Vrstice strani in skladi strani

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

About Kirigami API documentation: use https://api-staging.kde.org/kirigami-index.html for now

Click here to read more

We are aware of issues involving broken links to Kirigami API documentation. We are currently working on a better website to address these issues, porting the API docs where possible.

In its current state, the staging API website under development for Kirigami can be used to access all relevant Kirigami API pages, and it should already work better than the previous API website. You can access the staging API website through https://api-staging.kde.org/kirigami-index.html.

If you'd like to assist us in our efforts to port the API documentation, take a look at our Port API documentation to QDoc metatask.

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

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

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

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

Na splošno boste raje želeli uporabiti pageStack kot implementirati lastno PageRow, še posebej, ko vaša aplikacija postane večja in potrebujete, da vaše komponente živijo v ločenih datotekah. Če ustvarite svoje okno v vašem Main.qml z uporabo Kirigami.ApplicationWindow, lahko komponenta, ki se nahaja v drugi datoteki, še vedno neposredno prikliče globalni pageStack s klicem na 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!"
                }
            }
        }
    }
}

Klik na gumb potisne novo stran s pomočjo applicationWindow

Komponente, ki temeljijo na dejanjih

Drseče strani in pogledi seznama