qml Loader 加载器

Loader 加载器

在QML中，Loader是一个非常强大的元素，用于动态加载和卸载QML组件。

它允许你在运行时根据需要加 载不同的组件，从而实现更灵活和动态的UI管理。

以下是Loader的详细介绍，包括其主要属性、信号和方法。

1. Loader的基本用法

Loader可以加载一个QML组件，并将其显示在UI中。

你可以使用source属性来指定一个QML文件，

或者使用sourceComponent属性来指定一个Component对象。

使用source属性加载QML文件

import QtQuick 2.15Rectangle {width: 300height: 300color: "lightgray"Loader {id: myLoadersource: "MyComponent.qml"anchors.centerIn: parent}
}

使用sourceComponent属性加载Component对象

import QtQuick 2.15Rectangle {width: 300height: 300color: "lightgray"Component {id: myComponentRectangle {width: 100height: 100color: "blue"}}Loader {id: myLoadersourceComponent: myComponentanchors.centerIn: parent}
}

2. Loader的属性

Loader提供了多个属性来控制其行为和外观。

source
指定要加载的QML文件的路径。Loader {source: "MyComponent.qml"
}sourceComponent
指定要加载的Component对象。Loader {
sourceComponent: myComponent
}active
控制Loader是否处于活动状态。如果设置为false，则不会加载组件。Loader {
active: false
source: "MyComponent.qml"
}asynchronous
指定是否异步加载组件。如果设置为true，则组件会在后台线程中加载。Loader {
asynchronous: true
source: "MyComponent.qml"
}item
返回当前加载的组件实例。如果未加载任何组件，则返回null。Loader {
id: myLoader
source: "MyComponent.qml"
}Component.onCompleted: {
if (myLoader.item) {
console.log("Component loaded:", myLoader.item)
}
}

3. Loader的信号

Loader提供了多个信号来通知加载状态的变化。

onLoaded
当组件加载完成时触发。

Loader {source: "MyComponent.qml"onLoaded: console.log("Component loaded")
}

onStatusChanged
当加载状态发生变化时触发。状态可以是Loader.Null、Loader.Ready、Loader.Loading或Loader.Error。

Loader {source: "MyComponent.qml"onStatusChanged: {if (status === Loader.Ready) {console.log("Component ready")} else if (status === Loader.Error) {console.log("Component loading failed")}}
}

4. Loader的方法

Loader提供了一些方法来控制加载行为。

setSource
动态设置要加载的QML文件。

Loader {id: myLoader
}MouseArea {anchors.fill: parentonClicked: myLoader.setSource("MyComponent.qml")
}

setSourceComponent
动态设置要加载的Component对象。

Loader {id: myLoader
}MouseArea {anchors.fill: parentonClicked: myLoader.setSourceComponent(myComponent)
}

5. Loader的动态卸载

你可以通过将source或sourceComponent属性设置为undefined来卸载当前加载的组件。

Loader {id: myLoadersource: "MyComponent.qml"
}MouseArea {anchors.fill: parentonClicked: myLoader.source = undefined
}

6. Loader的错误处理

Loader提供了错误处理机制，可以在组件加载失败时捕获错误。

Loader {source: "NonExistentComponent.qml"onStatusChanged: {if (status === Loader.Error) {console.log("Component loading failed")}}
}