QML Loader 和 createObject() 动态创建组件实例

在 QML 中，Loader 和 createObject() 都可以用于动态创建组件实例，但它们的适用场景和工作机制有显著区别。

---

一、核心机制对比

特性	Loader	createObject()
创建方式	声明式（QML内直接定义）	命令式（JavaScript调用）
生命周期管理	自动管理加载/卸载	需手动管理对象销毁
作用域访问	通过item属性访问	直接获得对象引用
性能开销	较高（内置状态管理）	较低（直接实例化）
典型应用场景	动态UI、条件渲染	复杂动态布局、批量创建

---

二、Loader 深度解析

1. 基础用法

// 定义组件
Component {
    id: rectComponent
    Rectangle { 
        width: 100; height: 50; color: "blue" 
    }
}

// 动态加载
Loader {
    id: myLoader
    sourceComponent: rectComponent
    active: true  // 默认为true
}

2. 关键特性

• 自动卸载：当active设为false时自动销毁实例
• 状态同步：通过item属性访问实例（可能为null）
• 异步加载：支持asynchronous属性提升性能

3. 典型问题解决方案

问题：组件卸载后访问item报错

Button {
    text: "获取宽度"
    onClicked: {
        if (myLoader.item) {  // 必须判空
            console.log(myLoader.item.width)
        }
    }
}

---

三、createObject() 深度解析

1. 基础用法

// 定义组件
Component {
    id: circleComponent
    Rectangle { 
        width: 50; height: 50; 
        radius: width/2; color: "green" 
    }
}

// 动态创建
function spawnCircle() {
    const circle = circleComponent.createObject(parentItem, {
        "x": Math.random() * 300,
        "y": Math.random() * 300
    })
    
    // 必须手动管理销毁
    circle.destroyOnClose = true
}

2. 关键参数

createObject(parent, properties)

• parent：必须指定的父对象（否则不可见）
• properties：初始属性键值对（如{ "color": "red" }）

3. 内存管理最佳实践

Item {
    id: container
    property var dynamicItems: []
    
    function cleanUp() {
        dynamicItems.forEach(item => item.destroy())
        dynamicItems = []
    }
}

---

四、性能关键场景对比

场景1：频繁创建/销毁

方案	内存占用	CPU开销	推荐度
Loader	较高	较高	⭐⭐
createObject	低	低	⭐⭐⭐⭐

结论：使用对象池+createObject()

场景2：条件显示UI块

方案	代码复杂度	响应速度	推荐度
Loader	低	快	⭐⭐⭐⭐
createObject	高	慢	⭐⭐

结论：使用Loader+active控制

---

五、混合使用模式

1. 动态工具栏实现

// 工具栏模板
Component {
    id: toolButtonComp
    Button {
        required property string icon
        icon.source: `qrc:/icons/${icon}.png`
    }
}

// 动态加载
Loader {
    id: dynamicTool
    sourceComponent: toolButtonComp
    onLoaded: {
        item.icon = currentTool  // 初始化属性
    }
}

// 动态创建（适合批量）
function createTools() {
    const tools = ["cut", "copy", "paste"]
    tools.forEach(tool => {
        toolButtonComp.createObject(toolbar, { "icon": tool })
    })
}

2. 性能敏感型表格

// 使用createObject批量创建（比Repeater更高效）
Component {
    id: rowComponent
    TableRow { /* ... */ }
}

ListView {
    id: listView
    delegate: Item {
        Component.onCompleted: {
            rowComponent.createObject(this, { "modelData": model })
        }
    }
}

---

六、终极选择指南

需求特征	推荐方案	原因
需要频繁切换显示/隐藏	Loader	自动生命周期管理
创建大量相似对象	createObject()	更低的内存开销
需要精确控制对象属性	createObject()	初始化参数更灵活
需要响应式数据绑定	Loader	与QML绑定系统集成更好
对象需要长期存在	createObject()	避免Loader的卸载开销

---

七、高级技巧：createObject() 与 Binding 结合

// 动态创建并保持数据同步
function createSmartItem(parent, initialValue) {
    const obj = component.createObject(parent, { "value": initialValue })
    
    // 动态绑定（比Binding元素更灵活）
    obj.valueUpdater = Qt.binding(() => externalValue * 2)
    
    return {
        item: obj,
        destroy: function() { obj.destroy() }
    }
}