QML 动态加载组件

在 QML 中，Component 和 Loader 是两个非常重要的元素，它们通常一起使用来实现动态加载和组件复用。下面我将详细解释它们的用法和区别：

---

1. Component（组件）

基本概念

Component 是一个可以重复使用的 QML 元素定义，它本身不会直接创建实例，而是作为模板使用。

主要用途

• 定义可复用的 UI 组件
• 作为 Loader 的源组件
• 用于 ListView/GridView 的委托

基本语法

Component {
    id: myComponent
    // 在这里定义你的 QML 元素
    Rectangle {
        width: 100
        height: 100
        color: "red"
    }
}

使用方式

1. 与 Loader 一起使用：

   Loader {
       sourceComponent: myComponent
   }
   

2. 作为委托组件：

   ListView {
       model: myModel
       delegate: myComponent
   }
   

3. 内联定义：

   Loader {
       sourceComponent: Component {
           Rectangle { color: "blue" }
       }
   }
   

特点

• 不会立即实例化
• 可以包含任意 QML 元素
• 可以有自己的逻辑和属性

---

2. Loader（加载器）

基本概念

Loader 用于动态加载和实例化 QML 组件。

主要用途

• 延迟加载（优化性能）
• 条件性加载组件
• 动态切换不同组件

基本语法

Loader {
    id: myLoader
    source: "MyComponent.qml"  // 方式1：从文件加载
    // 或者
    sourceComponent: myComponent  // 方式2：加载Component对象
    active: true  // 控制是否加载
    width: item ? item.width : 0  // 访问加载的项
    height: item ? item.height : 0
}

关键属性

属性	说明
source	要加载的 QML 文件路径
sourceComponent	要加载的 Component 对象
active	是否激活加载（默认为 true）
item	引用已加载的组件实例
status	加载状态（Ready, Loading, Error等）

使用示例

1. 动态切换组件：

   Loader {
       sourceComponent: tab === 1 ? tab1Component : tab2Component
   }
   

2. 延迟加载：

   Loader {
       active: false  // 初始不加载
       // 当需要时再设置为true
   }
   

3. 访问加载的项：

   Button {
       text: "Get Size"
       onClicked: console.log(myLoader.item.width, myLoader.item.height)
   }
   

---

3. Component 和 Loader 的配合使用

典型模式

// 1. 定义一个Component
Component {
    id: redSquare
    Rectangle {
        color: "red"
        width: 100
        height: 100
    }
}

// 2. 用Loader加载它
Loader {
    id: loader
    sourceComponent: redSquare
    anchors.centerIn: parent
}

// 3. 控制加载行为
Button {
    text: "Toggle"
    onClicked: loader.active = !loader.active
}

动态创建示例

Button {
    text: "Create"
    onClicked: {
        var component = Qt.createComponent("MyComponent.qml")
        if (component.status === Component.Ready) {
            var obj = component.createObject(parent)
        }
    }
}

---

4. 实际应用场景

场景1：按需加载复杂组件

Loader {
    active: showAdvancedSettings  // 只有需要时才加载
    sourceComponent: Component {
        AdvancedSettingsPanel { /* 复杂的内容 */ }
    }
}

场景2：视图切换

Loader {
    source: viewMode === "list" ? "ListView.qml" : "GridView.qml"
}

场景3：延迟实例化优化性能

Loader {
    active: false  // 初始不加载
    source: "HeavyComponent.qml"
    
    // 当元素进入可视区域时才加载
    onVisibleChanged: if (visible) active = true
}

---

5. 注意事项

1. 内存管理：

   • Loader 卸载组件时会自动销毁实例
   • 使用 Qt.createComponent() 手动创建的需要手动销毁

2. 作用域：

   • 加载的组件可以访问父级作用域
   • 但父级不能直接访问加载组件内部的元素（需要通过 item 属性）

3. 性能优化：

   • 对复杂组件使用延迟加载
   • 避免频繁切换 source 或 sourceComponent

4. 错误处理：

   Loader {
       onStatusChanged: {
           if (status === Loader.Error) console.error("加载失败")
       }
   }
   

5. 异步加载：

   Loader {
       asynchronous: true  // 在后台线程加载
       onLoaded: console.log("加载完成")
   }
   

---

6. 与其它技术的比较

技术	优点	缺点	适用场景
Component+Loader	灵活，动态加载，内存管理方便	需要额外代码	动态UI，条件显示
动态创建 (createObject)	完全控制创建时机	需要手动管理生命周期	需要动态添加多个实例
Visibility	简单	仍然占用内存	简单显示/隐藏
StackView	导航支持	较重	页面导航

---

7. 最佳实践建议

1. 对于可能不显示的复杂组件，总是使用 Loader
2. 使用 asynchronous: true 提高界面响应速度
3. 通过 active 属性控制加载时机而非 source
4. 对于重复使用的组件，预创建 Component
5. 在移动设备上，考虑使用 Loader 的 asynchronous 属性