QtQuick/QML方法2：页面切换的几种方式

记录一些QtQuick/QML基础方法，大佬忽略。。。

• 方式1：主页面与子页面互相切换-不需初始化，实时创建

  • 当前页面切换子页面
    • import页面文件
    • var component = Qt.createComponent("LoadedPage.qml") ;
    • var object = component.createObject(parent);或直接贴qml字符串：
      • var myItem = Qt.createQmlObject("import QtQuick 2.0; MyItem {}", parent);
  • 子页面切换为父页面，销毁子页面即可,qt安全机制，可在内部调用destroy()
    • 1、object.destroy();或myItem .destroy();

• 方式2：平级页面切换-使用Loader加载，无动画     

  • 使用Loader.setSource方式-无需初始化子页面，销毁不保留
    • 在父页面，创建loader，并初始化
      • Loader{
        • id:loader;
        • source: "initPage.qml" ;
      • }
      • 切换其他页面显示
        • loader.setSource("otherPage.qml")
  • 使用setComponent方式-初始化子页面，保留页面
    • 在父页面，创建多个页面的component，过程不赘述
    • 在父页面，创建loader，并初始化component
      • Loader{
        • id:loader；
        • sourceComponent:initPonent;
      • }
    • 在子页面或父页面，触发切换
      •  loader.sourceComponent = otherPonent;

• 方式3：多个平级页面切换-使用stackview，需要初始化，有动画

  • 在父页面，创建多个component，过程不赘述

    • Component{

      • id:initComponent;

    • }

    • Component{

      • id:component1;

    • }

  • 在父页面，创建一个StackView，并设置初始页面

    •  StackView{

      • id: stackView;

      • anchors.fill: parent;

      • initialItem: initComponent;

    • }

  • 在父页面，定义切换函数，用于切换页面

    • function changePage1(){

      • stackView.push(component1)

    • }

  • 在子页面，触发切换

    • parent.changePage1();

方式4：内部页面切换-TabView方式或Loader方式加载

• TabView

  • import QtQuick 2.0
    import QtQuick.Controls 2.15

    TabView {
        Tab {
            title: "Tab 1"
            Rectangle {
                color: "lightblue"
                anchors.fill: parent
                Text {
                    text: "Content of Tab 1"
                    anchors.centerIn: parent
                }
            }
        }

        Tab {
            title: "Tab 2"
            Rectangle {
                color: "lightgreen"
                anchors.fill: parent
                Text {
                    text: "Content of Tab 2"
                    anchors.centerIn: parent
                }
            }
        }
    }

• Loader效果在上文有描述

方式5：多个平级页面切换-需要初始化，隐藏与显示方式

• 初始化多个页面 //初始化不赘述
• 在事件或槽函数进行不同页面的隐藏与显示