QML之使用Loader加载QML组件

QML的Loader元素经常备用来动态加载QML组件。可以使用source属性或者sourceComponent属性加载。这个元素最有用的地方是它能在qml组件需要的时候再创建，即延迟创建QML的时间。

一. 使用source组件加载qml

main.qml

import QtQuick 2.12

import QtQuick.Window 2.12

Window {

    property bool isFirst : false;

    visible: true

    width: 640

    height: 480

    title: qsTr("Hello World")

    Loader {

        id: pageLoader

    }

    MouseArea {

        anchors.fill: parent

        onClicked: changePage();

    }

    function changePage() {

        if(isFirst) {

            pageLoader.source = "Page1.qml"  // 通过source 加载qml 界面

        } else {

            pageLoader.source = "Page2.qml"

        }

        isFirst = !isFirst;

    }

}

 

page1.qml

import QtQuick 2.12

Rectangle  {

    width: 100

      height: 62

      Text {

          anchors.centerIn: parent

          text: "Page1 Test"

      }

}

page2.qml

import QtQuick 2.12

Rectangle {

    width: 100

    height: 62

    Text {

        anchors.centerIn: parent

        text: "Page2 Test"

    }

}

二。使用sourceComponent 默认加载组件

main.qml

import QtQuick 2.12

import QtQuick.Window 2.12

Window {

    property bool isFirst : false;

    visible: true

    width: 640

    height: 480

    title: qsTr("Hello World")

    Loader {

        id: pageLoader

        sourceComponent:  rect

    }

    MouseArea {

        anchors.fill: parent

        onClicked: changePage();

    }

    function changePage() {

        if(isFirst) {

            pageLoader.source = "Page1.qml"

        } else {

            pageLoader.source = "Page2.qml"

        }

        isFirst = !isFirst;

    }

    Component {

            id: rect

            Rectangle {

                width: 200

                height: 50

                color: "red"

                Text {

                    text: "Default Page"

                    anchors.fill: parent

                }

            }

        }

}

绿色字体的为新增的代码： 实现界面起来就加载 rect 默认页