如何在main.qml中整合button1.qml与button2.qml内的Eclairage组件

下面提供几种实用的实现方式：

方式一：直接实例化组件 #

如果不需要单独控制每个Eclairage，只是要把它们整合到main.qml中，直接在main.qml里实例化button1和button2即可，它们内部的Eclairage会自动被包含进来：

// main.qml
import QtQuick 2.15

Rectangle {
    width: 800
    height: 600

    Button1 {
        id: btn1
        anchors.left: parent.left
        anchors.top: parent.top
        width: 200
        height: 100
        nbOfEclairage: 2
    }

    Button2 {
        id: btn2
        anchors.left: btn1.right
        anchors.top: parent.top
        width: 200
        height: 100
        nbOfEclairage: 1
    }
}

注意：需要确保button1.qml和button2.qml中的nbOfEclairage、bEclairage2Salon、bEclairage2Salon2这些属性对外暴露，比如在组件顶部用property声明。修改button1.qml示例：

// button1.qml
import QtQuick 2.15

property int nbOfEclairage: 0
property bool bEclairage2Salon: false

ListModel {
    id: lightSalon
    ListElement { name: "Principal"; lightId: 11 }
    ListElement { name: "Secondaire"; lightId: 12 }
}

Rectangle {
    width: parent.width
    height: parent.height

    Eclairage {
        textEclairage: (nbOfEclairage > 1) ? lightSalon.get(1).name : ""
        bEclairage: bEclairage2Salon
    }
}

button2.qml做类似修改，添加对应的property声明。

方式二：单独引用每个Eclairage组件 #

如果需要在main.qml中直接操作每个Eclairage（比如控制状态、修改属性），可以在button1和button2中给Eclairage设置id，并通过property alias暴露给外部：

修改button1.qml：

// button1.qml
import QtQuick 2.15

property int nbOfEclairage: 0
property bool bEclairage2Salon: false
property alias eclairageInstance: eclairage // 暴露Eclairage引用

ListModel {
    id: lightSalon
    ListElement { name: "Principal"; lightId: 11 }
    ListElement { name: "Secondaire"; lightId: 12 }
}

Rectangle {
    width: parent.width
    height: parent.height

    Eclairage {
        id: eclairage
        textEclairage: (nbOfEclairage > 1) ? lightSalon.get(1).name : ""
        bEclairage: bEclairage2Salon
    }
}

button2.qml同理添加alias：

// button2.qml
import QtQuick 2.15

property int nbOfEclairage: 0
property bool bEclairage2Salon2: false
property alias eclairageInstance: eclairage

ListModel {
    id: lightSalon2
    ListElement { name: "Principal"; lightId: 11 }
}

Rectangle {
    width: parent.width
    height: parent.height

    Eclairage {
        id: eclairage
        textEclairage: (nbOfEclairage > 1) ? lightSalon2.get(1).name : ""
        bEclairage: bEclairage2Salon2
    }
}

然后在main.qml中就可以直接访问每个Eclairage：

// main.qml
import QtQuick 2.15

Rectangle {
    width: 800
    height: 600

    Button1 {
        id: btn1
        anchors.left: parent.left
        anchors.top: parent.top
        width: 200
        height: 100
        nbOfEclairage: 2
        bEclairage2Salon: true
    }

    Button2 {
        id: btn2
        anchors.left: btn1.right
        anchors.top: parent.top
        width: 200
        height: 100
        nbOfEclairage: 1
        bEclairage2Salon2: false
    }

    // 示例：在main中操作Eclairage的属性
    Component.onCompleted: {
        console.log("Button1的Eclairage文本：", btn1.eclairageInstance.textEclairage)
        btn2.eclairageInstance.bEclairage = true
    }
}

方式三：重构代码（推荐） #

考虑到两个组件逻辑相似，只是ListModel和部分属性不同，建议重构为一个通用组件，减少重复代码：

创建通用组件LightControl.qml：

// LightControl.qml
import QtQuick 2.15

property int nbOfEclairage: 0
property bool bEclairage: false
property ListModel lightModel // 外部传入ListModel

Rectangle {
    width: parent.width
    height: parent.height

    Eclairage {
        textEclairage: (nbOfEclairage > 1 && lightModel.count > 1) ? lightModel.get(1).name : ""
        bEclairage: bEclairage
    }
}

然后在main.qml中直接使用这个通用组件，传入不同的ListModel和参数：

// main.qml
import QtQuick 2.15

Rectangle {
    width: 800
    height: 600

    // 第一个灯光控制
    ListModel {
        id: lightSalon
        ListElement { name: "Principal"; lightId: 11 }
        ListElement { name: "Secondaire"; lightId: 12 }
    }

    LightControl {
        id: control1
        anchors.left: parent.left
        anchors.top: parent.top
        width: 200
        height: 100
        nbOfEclairage: 2
        bEclairage: true
        lightModel: lightSalon
    }

    // 第二个灯光控制
    ListModel {
        id: lightSalon2
        ListElement { name: "Principal"; lightId: 11 }
    }

    LightControl {
        id: control2
        anchors.left: control1.right
        anchors.top: parent.top
        width: 200
        height: 100
        nbOfEclairage: 1
        bEclairage: false
        lightModel: lightSalon2
    }
}

这种方式不仅简化了代码，也更容易维护和扩展。

内容的提问来源于stack exchange，提问作者Jung San