QML: навигация между страницами qml с точки зрения дизайна

Question

Нам нужно разработать проект QtQuick, где у нас около 100 экранов.

Я попытался сделать демонстрационный проект для навигации, который имеет три экрана при нажатии кнопки. Я использовал понятия "состояния" в навигации между страницами. Первоначально я пытался сделать то же самое, используя "Загрузчик", но загрузчик не смог сохранить предыдущее состояние страницы, он перезагружал всю страницу во время навигации.

Ниже приведен фрагмент кода файла main.qml.

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    id:main_rectangle
    width: 360
    height: 640

    Page1{
        id:page1
    }

    Page2{
        id:page2
    }

    Page3{
        id:page3
    }

    states: [
        State {

            name: "page2"

            PropertyChanges { target: page3; visible:false; }
            PropertyChanges { target: page1; visible:false; }
            PropertyChanges { target: page2; visible:true; }
        },
        State {
            name: "page1"
            PropertyChanges { target: page3; visible:false; }
            PropertyChanges { target: page2; visible:false; }
            PropertyChanges { target: page1; visible:true; }
        },

        State {
            name: "page3"
            PropertyChanges { target: page1; visible:false; }
            PropertyChanges { target: page2; visible:false; }
            PropertyChanges { target: page3; visible:true; }
        }

    ]

}

Это хорошо работает с небольшим POC с тремя экранами, но невозможно определить состояния для 100 экранов.

С точки зрения проектирования мы пришли к выводу, что для создания контроллера C++ мы контролируем состояния, видимость различных страниц.

Нужны предложения, как реализовать логику 'State' в C++.

Answer 1

Вот простейшее решение в простом QML, использующее настраиваемый список страниц (например, модель) + элементы Repeater + Loader, чтобы не загружать все при запуске (отложенное создание экземпляров) и не уничтожать страницу после ее скрытия (чтобы не приходилось перезагружать ее если вернемся к этому)

import QtQuick 1.1

Rectangle {
    id: main_rectangle;
    width: 360;
    height: 640;

    // Put the name of the QML files containing your pages (without the '.qml')
    property variant pagesList  : [
        "Page1",
        "Page2",
        "Page3",
        "Page4",
        "Page5"
    ];

    // Set this property to another file name to change page
    property string  currentPage : "Page1";

    Repeater {
        model: pagesList;
        delegate: Loader {
            active: false;
            asynchronous: true;
            anchors.fill: parent;
            visible: (currentPage === modelData);
            source: "%1.qml".arg(modelData)
            onVisibleChanged:      { loadIfNotLoaded(); }
            Component.onCompleted: { loadIfNotLoaded(); }

            function loadIfNotLoaded () {
                // to load the file at first show
                if (visible && !active) {
                    active = true;
                }
            }
        }
    }
}

Надеюсь, поможет!

Answer 2

Я предлагаю использовать StackView из Qt Quick Components. Вот его документация.