qml Component 组件

Component 组件

在QML中，Component是一个用于定义可重用QML组件的元素。

它允许你将一段QML代码封装成一个独立的组件，然后在其他地方多次使用。

Component可以包含任何QML元素和属性，并且可以作为一个整体进行实例化。

1.Component本身是一个QML元素，用于定义一个新的组件。你可以将任何QML代码放在Component内部，从而创建一个新的组件。

Component {
    id: myComponent

    // 这里定义组件的内容
    Rectangle {
        width: 100
        height: 100
        color: "blue"
    }
}

2. Component的实例化

你可以使用Loader元素或createObject方法来实例化一个Component。

使用Loader元素
Loader元素允许你在运行时动态加载和卸载组件。

Loader {
    sourceComponent: myComponent
    anchors.centerIn: parent
}

使用createObject方法
createObject方法允许你动态创建组件的实例，并将其附加到指定的父对象上。

var newObject = myComponent.createObject(parent, {x: 50, y: 50});

3. Component的属性

Component可以包含任何QML元素和属性，并且可以定义自己的属性。

Component {
    id: parameterizedComponent

    Rectangle {
        width: size
        height: size
        color: colorName

        property int size: 100
        property string colorName: "blue"
    }
}

4. Component的信号

Component可以定义和使用信号，以便在组件实例化或销毁时执行特定的操作。

Component {
    id: componentWithSignal

    Rectangle {
        width: 100
        height: 100
        color: "blue"

        signal mySignal(string message)

        Component.onCompleted: mySignal("Component created")
    }
}

5. Component的生命周期

Component有其生命周期，可以通过信号和方法来管理。

Component.onCompleted
当组件实例化完成时，会触发Component.onCompleted信号。

Component {
    id: componentWithLifecycle

    Rectangle {
        width: 100
        height: 100
        color: "blue"

        Component.onCompleted: console.log("Component created")
    }
}

Component.onDestruction
当组件即将被销毁时，会触发Component.onDestruction信号。

Component {
    id: componentWithLifecycle

    Rectangle {
        width: 100
        height: 100
        color: "blue"

        Component.onDestruction: console.log("Component about to be destroyed")
    }
}

6. Component的动态加载和卸载

你可以使用Loader元素来动态加载和卸载组件，从而实现更灵活的UI管理。

Loader {
    id: dynamicLoader
    sourceComponent: myComponent
    anchors.centerIn: parent
}

// 动态卸载组件
dynamicLoader.sourceComponent = undefined

7. Component的错误处理

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

Loader {
    id: errorHandlingLoader
    sourceComponent: myComponent
    onStatusChanged: {
        if (status === Loader.Error)
            console.log("Component loading failed")
    }
}

8. Component的嵌套

Component可以嵌套在其他Component中，从而创建更复杂的组件结构。

Component {
    id: outerComponent

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

        Loader {
            sourceComponent: innerComponent
            anchors.centerIn: parent
        }
    }
}

Component {
    id: innerComponent

    Rectangle {
        width: 100
        height: 100
        color: "blue"
    }
}