qml Loader 加载器

Loader 加载器

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

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

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

1. Loader的基本用法

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

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

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

使用source属性加载QML文件

import QtQuick 2.15

Rectangle {
    width: 300
    height: 300
    color: "lightgray"

    Loader {
        id: myLoader
        source: "MyComponent.qml"
        anchors.centerIn: parent
    }
}

使用sourceComponent属性加载Component对象

import QtQuick 2.15

Rectangle {
    width: 300
    height: 300
    color: "lightgray"

    Component {
        id: myComponent
        Rectangle {
            width: 100
            height: 100
            color: "blue"
        }
    }

    Loader {
        id: myLoader
        sourceComponent: myComponent
        anchors.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: parent
    onClicked: myLoader.setSource("MyComponent.qml")
}

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

Loader {
    id: myLoader
}

MouseArea {
    anchors.fill: parent
    onClicked: myLoader.setSourceComponent(myComponent)
}

5. Loader的动态卸载

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

Loader {
    id: myLoader
    source: "MyComponent.qml"
}

MouseArea {
    anchors.fill: parent
    onClicked: myLoader.source = undefined
}

6. Loader的错误处理

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

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