QML元素 - Loader

在QML中，Loader 是一个用于动态加载和卸载组件的元素，能够有效管理资源并实现按需加载。以下是其使用方法的详细说明：

1. 核心属性和方法

• source: 指定要加载的QML文件的路径（如 "MyComponent.qml"）。
• sourceComponent: 直接加载已定义的 Component 对象（避免重复解析文件）。
• active: 布尔值控制加载状态，设为 false 时卸载组件并释放资源。
• item: 访问已加载组件的实例（未加载时为 null）。
• status: 获取加载状态（如 Loader.Ready 表示成功）。

常用方法：

• setSource(source, props): 动态加载组件并传递属性（如 setSource("MyComponent.qml", { color: "red" })）。

2. 使用场景

(1) 动态切换组件

根据用户操作切换不同界面：

Loader {
    id: pageLoader
    anchors.fill: parent
}

Button {
    text: "加载页面A"
    onClicked: pageLoader.source = "PageA.qml"
}

Button {
    text: "加载页面B"
    onClicked: pageLoader.source = "PageB.qml"
}

(2) 延迟加载

用户触发后加载复杂内容：

Loader {
    id: detailLoader
    active: false // 默认不加载
    source: "DetailView.qml"
}

Button {
    text: "显示详情"
    onClicked: detailLoader.active = true
}

(3) 传递参数

通过 setSource 传递初始属性：

Loader {
    id: configLoader
}

Button {
    text: "配置"
    onClicked: configLoader.setSource("ConfigPanel.qml", { fontSize: 14 })
}

3. 注意事项

• 尺寸管理：若加载的组件无固定大小，需显式设置 Loader 的 width 和 height。
• 空值检查：访问 item 前需验证是否加载成功：

  if (loader.item) {
      console.log(loader.item.text);
  }
  

• 错误处理：监听 status 处理加载失败：

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

• 作用域与父级：加载的组件父级为 Loader，可通过 parent 属性覆盖。
• 性能优化：频繁切换时考虑缓存或复用组件，避免重复加载。

4. 完整示例

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    Loader {
        id: dynamicLoader
        anchors.centerIn: parent
        // 初始加载简单组件
        sourceComponent: simpleComponent
    }

    Component {
        id: simpleComponent
        Rectangle {
            width: 100; height: 50
            color: "lightgreen"
            Text { text: "默认组件" }
        }
    }

    Button {
        anchors.bottom: parent.bottom
        text: "切换复杂组件"
        onClicked: {
            dynamicLoader.setSource("ComplexComponent.qml", { "title": "动态标题" });
        }
    }
}

5. 常见问题

• 路径错误：确保 source 路径正确，否则 status 变为 Loader.Error。
• 内存泄漏：及时将 active 设为 false 释放不用的组件。
• 状态保留：若需保留组件状态，考虑隐藏（visible: false）而非卸载。

通过合理使用 Loader，可以实现灵活的组件管理和资源优化，提升QML应用的性能与用户体验。