QML:设计感知中的QML页面之间的导航

QML : Navigation between qml pages from design perception

本文关键字：QML 之间 导航 感知      更新时间：2023-10-16

我们需要开发一个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 控制器控制状态，各个页面的可见性。

需要建议如何在C 中实现"状态"逻辑。

这是普通QML中最简单的解决方案，使用可配置的页面列表（例如模型） recreater 载荷项目，以不加载启动（Lazy Instanciation）的所有内容，而不是破坏A隐藏它后（如果我们回到它，则不必重新加载它）：

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

希望它有帮助！

我建议使用QT快速组件的stackView。这是其文档。

相关文章：