Paĝaj vicoj kaj paĝaj stakoj

Aldonu fluon al via aplikaĵo: Aldonu, forigu kaj anstataŭigu paĝojn en malsamaj manieroj

Vico da paĝoj

Ni vidis ĝis nun, ke unu el la kernaj komponantoj de Kirigami-fenestro estas Kirigami.Paĝo. Ununura paĝo povas envolvi la tutan ekranon de la aplikaĵo, aŭ ĝi povas esti montrita kune kun aliaj paĝoj samtempe, se estas spaco.

Kiam ajn paĝo estas aldonita, aŭ puŝita, ĝi aperas dekstre de la ekzistanta(j) paĝo(j), formante vicon. Ĉi tiu vico de paĝoj povas esti administrita per la taŭge nomita Kirigami.PageRow.

Minimuma paĝa vico kun ununura paĝo povus aspekti jene:

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

Ununura paĝo kun helblua koloro por montri la dimensiojn de la paĝo

Estas du plibonigoj kiuj povas esti faritaj ĉi tie. La unua estas ke, kun initialPage, ni povas ambaŭ agordi mainPage kiel la unua paĝo kiu aperas en la paĝa vico, kaj ke ĝiaj dimensioj estu administritaj de la paĝa vico anstataŭe. de per manlibro ankroj, [poziciantoj](https://doc.qt.io/qt-6/qtquick- positioning-layouts.html) aŭ layouts. La dua estas havi ilobreton, kiun oni povas agordi difinante ilobretan stilon per globalToolBar.style. Estas kelkaj stiloj el kiuj ni povas elekti, sed ni iros kun Kirigami.ApplicationHeaderStyle.Auto nuntempe.

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

Ununura paĝo kun ilobreto kaj helblua koloro por montri la dimensiojn de la paĝo

Estas nur du manieroj aldoni paĝojn al paĝa vico: agordante ĝian komencanPaĝon (kiu povas laŭvole preni tabelon da paĝoj) aŭ uzante [push()](dokumentoj: kirigami2;PageRow::push). Por forigi paĝon de la paĝa vico, vi devus uzi pop(), dum goBack() aŭ [goForward()] (docs:kirigami2;PageRow::goForward) povas esti uzata por navigi inter paĝoj.

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

Alklakante "Puŝu!", aperas dua paĝo kun helverda koloro

La stako de paĝoj de la aplikaĵo

Se Kirigami.PageRow kun ilobreto aspektas konata al vi, tio estas ĉar vi antaŭe vidis ĝin. ApplicationWindow.pageStack estas nenio alia ol tre oportuna, ĉiea paĝvico. Ĉiu funkcio disponebla por PageRow ankaŭ disponeblas por la pageStack.

La antaŭa ekzemplo povas esti reduktita signife per "pageStack", kun la kroma bonuso de navigaciaj agoj:

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

Ĝenerale vi volos uzi pageStack' anstataŭ efektivigi vian propran [PageRow](docs:kirigami2;PageRow), precipe kiam via aplikaĵo pligrandiĝas kaj vi bezonas viajn komponantojn loĝantajn en apartaj dosieroj. Se vi kreas vian fenestron en via Main.qmluzante [Kirigami.ApplicationWindow](docs:kirigami2;ApplicationWindow), komponanto loĝanta en alia dosiero ankoraŭ povas rekte alvoki la ĉieanpageStack' per voko al la 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 {}
}

kaj

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

Alklakante la butonon puŝas novan paĝon helpe de applicationWindow

Agoj bazitaj komponantoj

Rulumeblaj paĝoj kaj listvidoj