Component和Loader

文章内容

效果图

代码

import QtQuick 2.15
import QtQuick.Window 2.15
import FluentUI
import QtQuick.Controls 2.5


Window {
    visible: true
    width: 320
    height: 240



    // 自定义组件:需要手动加载
    Component{
        id:com
        Rectangle{
            id:rect
            width: 80
            height: 60
            color: "red"
            // 添加打印语句
            Component.onCompleted: { // 父控件创建时调用
                console.log("调用")
            }
            Component.onDestruction:  { // 父控件析构时调用
                console.log("析构")
            }
        }

    }

    Loader{
        id:loader
        // source: "/MyRec.qml" // 方式一
        sourceComponent: com // 方式二
        onStatusChanged: {
            console.log("status:",status)
        }
    }

    Button{
        id: button1
        width: 100
        height: 40
        x:100
        text:"动态加载按钮"
        onClicked: {
            loader.item.width = 40
            loader.item.color = "blue"
        }

    }

    Button{
        width: 100
        height: 40
        anchors.left: button1.left
        anchors.top:button1.bottom
        text:"析构按钮"
        onClicked: {
            loader.sourceComponent = null
        }

    }
}