首页 文章

QML：从设计感知到qml页面之间的导航

提问于
浏览 次
8

我们需要开发一个QtQuick项目，我们有大约100个屏幕 .

我曾尝试为导航制作一个演示项目，按钮点击时有三个屏幕 . 我在页面之间的导航中使用了“States”的概念 . 最初我尝试使用'Loader'，但加载器无法保留以前的页面状态，它在导航过程中重新加载整个页面 .

下面是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中实现“状态”逻辑的建议 .

c++ qt design qml qt-quick

2 回答

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

    希望能帮助到你 ！

    回复于
  • 6

    我建议使用Qt Quick Components的StackView . Here是它的文档 .

    回复于

相关问题