Стеки страниц (page rows и page stacks)

Поток переходов в приложении: добавление, удаление и замена страниц различными способами

Ряд страниц

Ранее уже отмечалось, что одним из основных компонентов окна Kirigami является Kirigami.Page. Одна страница занимает весь экран приложения либо показывается одновременно с другими страницами, если есть место.

Когда страница добавляется или помещается в стек, она появляется справа от существующих страниц, образуя ряд. Управлять этим рядом страниц можно с помощью метко названного Kirigami.PageRow.

Минимальный ряд страниц с одной страницей может выглядеть так:

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

Одна страница светло-синего цвета, показывающая размеры страницы

Здесь можно внести два улучшения. Первое: с помощью initialPage можно и задать mainPage в качестве первой страницы, появляющейся в стеке страниц, и поручить управление её размерами стеку страниц вместо ручного задания якорей, позиционеров или компоновок. Второе — добавить панель инструментов, которую можно задать, определив стиль панели инструментов с помощью globalToolBar.style. Можно выбрать один из нескольких стилей, но пока остановимся на 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"
            }
        }
    }
}

Одна страница с панелью инструментов и светло-синим цветом, показывающим размеры страницы

Добавить страницы в стек страниц можно только двумя способами: задав её свойство initialPage (которое может дополнительно принимать массив страниц) или использовав push(). Чтобы удалить страницу из стека страниц, используйте pop(), а для перехода между страницами можно использовать goBack() или goForward().

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

Начальная страница со светло-синим цветом

После нажатия кнопки «Push!» появляется вторая страница светло-зелёного цвета

Стек страниц приложения

Если Kirigami.PageRow с панелью инструментов выглядит знакомо, то лишь потому, что он уже встречался ранее. ApplicationWindow.pageStack — не что иное, как очень удобный глобальный стек страниц. Все функции, доступные в PageRow, доступны и в pageStack.

Предыдущий пример можно значительно сократить с помощью pageStack, а дополнительным преимуществом станут действия навигации:

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

Обычно следует использовать pageStack, а не реализовывать собственный PageRow, особенно когда приложение разрастается и компоненты требуется размещать в отдельных файлах. Если окно создаётся в Main.qml с помощью Kirigami.ApplicationWindow, компонент, находящийся в другом файле, всё равно может напрямую обратиться к глобальному pageStack посредством вызова 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!"
                }
            }
        }
    }
}

Добавление новой страницы при нажатии кнопки с помощью applicationWindow

Компоненты на основе действий

Прокручиваемые страницы и списки