Основные принципы

Понятная навигация через стек страниц в пользовательских приложениях

Подробней о StackView

Стековая навигация: StackView работает по принципу стека, где пользователь может переходить от одного представления к другому. Каждое новое представление добавляется (или «пушится») на вершину стека. Пользователь может вернуться к предыдущему представлению, «выталкивая» текущее представление из стека.
Управление представлениями: StackView позволяет добавлять, удалять и заменять представления с помощью различных методов, таких как push(), pop() и replace(). Эти методы управляют навигацией между представлениями в вашем приложении.

Подробней о ApplicationWindow

Модуль RosaControls предоставляет компонент ApplicationWindow, который следует использовать для каждого приложения. Модуль предоставляет базовые функции для работы со стеком страниц, а также свойства landscapeMode и другие, которые понадобятся в разработке. Доступ к объекту ApplicationWindow можно получить через функцию applicationWindow().

Работа режима splitForm для планшетов

Параметр tabletFormSupported: false позволяет включить поддержку автоматической конфигурации формы для tabletScreen, где страница initialPage "переезжает" на боковую панель слева, а все остальные страницы добавляются в правую часть формы.

При этом следующая добавленная страница становится основной для правой части и не выгружается через pop(). Параметр splitForm включён, если одновременно используются tabletScreen и tabletFormSupported. Он применяется в автоматической форме для планшета/десктопа.

Если вам не подходит данный режим, можно самостоятельно реализовать стартовую страницу, ориентируясь на параметр tabletScreen.

Форма для экрана телефона (splitForm: false) и для экрана планшета (splitForm: true)

Добавление стартовой страницы

Main.qml

Здесь задаются размеры формы, заголовок и стартовая страница. Первая запушенная страница становится стартовой, и её нельзя выгрузить через pop().

Внимание

При указании размеров формы в пикселях важно помнить, что на мобильных устройствах плотность пикселей выше, поэтому исходный размер умножается на scaleFactor. Например, при указании размеров (size, width/height), отступов (spacing, padding и т.п.) значения следует оборачивать в функцию Rosa.Theme.scale(360).

width: Rosa.Theme.scale(360) // - OK 
rightPadding: 20 // - Ошибка 
leftPadding: Rosa.Theme.scale(20) // - OK

import QtQuick 2.15 
import QtQuick.Controls 2.15 
 
import RosaTheme 1.0 as Rosa 
import RosaControls 1.0 
 
ApplicationWindow { 
    width: Rosa.Theme.scale(360) 
    height: Rosa.Theme.scale(540) 
 
    title: qsTr("Hello World") 
    initialPage: "qrc:/qml/InitPage.qml" 
}

InitPage.qml

Страница состоит из компонента Page из модуля RosaControls 1.0.

На странице можно добавить заголовок header: PageHeader {...}. Заголовок может включать текст, кнопки или пользовательский контент.

В нижней части страницы можно добавить футер footer: PageFooter {...}, который чаще всего используется для кнопок навигации.

В заголовке добавлена кнопка Action { "Go to Simple Page" } (отображается как текстовая кнопка PageHeaderButton). При нажатии она вызывает push() и загружает SimplePage.qml, которая накладывается поверх InitPage.

import QtQuick 2.15 
import QtQuick.Controls 2.15 
import QtQuick.Layouts 1.15 
 
import RosaTheme 1.0 as Rosa 
import RosaControls 1.0 
 
Page { 
    id: root 
    title: "Init Page" 
 
    header: PageHeader { 
        title: root.title 
 
        actions: [ 
            Action { 
                text: "Go to Simple Page" 
                onTriggered: { 
                    applicationWindow().pushPage("qrc:/qml/SimplePage.qml", {title: "First Simple Page"}) 
                } 
            } 
        ] 
    } 
 
    Label { 
        anchors.centerIn: parent 
        text: "Ваша главная страница" 
        font: Rosa.Theme.helperMediumFont 
    } 
 
    footer: PageFooter { 
 
        RowLayout { 
            anchors.fill: parent 
            spacing: Rosa.Theme.scale(12) 
 
            Button { 
                Layout.alignment: Qt.AlignHCenter 
                text: "Btn 1" 
            } 
     
            Button { 
                Layout.alignment: Qt.AlignHCenter 
                text: "Btn 2" 
            } 
     
            Button { 
                Layout.alignment: Qt.AlignHCenter 
                text: "Btn 3" 
            } 
        } 
    } 
}

SimplePage.qml

На другой странице кнопка Action { "Next page" } задаёт свойства страницы: {title: "Next Page"} (можно задать и свои свойства). При загрузке вместо "Regular page" отобразится "Next Page".

Дополнительная кнопка "Go home" выгружает все предыдущие страницы (включая текущую) и сразу переходит на стартовую страницу.

import QtQuick 2.15 
import QtQuick.Controls 2.15 
 
import RosaTheme 1.0 as Rosa 
import RosaControls 1.0 
 
Page { 
    id: root 
    title: "Regular page" 
 
    header: PageHeader { 
        showBackButton: true 
 
        actions: [ 
            Action { 
                text: "Go home" 
                onTriggered: applicationWindow().flickBackPage() 
            }, 
            Action { 
                text: "Next page" 
                onTriggered: applicationWindow().pushPage("qrc:/qml/SimplePage.qml", {title: "Next Page"}) 
            } 
        ] 
    } 
 
    Label { 
        anchors.centerIn: parent 
        text: root.title 
        font: Rosa.Theme.helperMediumFont 
    } 
}

Результат

Стартовая страница

Следующая страница