Qt qml对多个对象使用相同的矩形组件

我试图通过调用相同的矩形组件并仅更改所需字段来减小qml文件的大小，并保持其余字段不变

下面显示的零件正在工作，但希望减小尺寸

基本上，我不想做潮湿矩形我想使用温度矩形，修改“x”值，内部连接只修改“路径”。如果是的话，这可能吗？谢谢你

Rectangle {
    id: landingScreen
    x: 0
    y: 0
    width: 800
    height: 350
    color: "#E4E4E4"
    visible: true

    property string path: ""
    property string val: ""

    Rectangle {
        id: temperature
        x: 8
        y: 11
        width: 351
        height: 329
        color: "#ffffff"
        radius: 10
        Text{
            id: textFieldtemp
            text :qsTr("")
            y:50
            font.family: "Helvetica"
            font.pointSize: 24
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Connections
        {
            target: myModel

            onSensorValueChanged:{

                path = "/root/temp"
                val = value
                if (addr === path)
                {
                    textFieldtemp.text = "Temperature " + val + "*C"
                }
            }
        }
    }

    Rectangle {
        id: moisture
        x: 369
        y: 13
        width: 209
        height: 157
        color: "#ffffff"
        radius: 10

        Text{
            id: textFieldmoist
            text :qsTr("")
            y:50
            font.family: "Helvetica"
            font.pointSize: 24
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Connections
        {
            target: myModel
            onSensorValueChanged:{

                path = "/root/moist"
                val = value
                if (addr === path)
                {
                    textFieldmoist.text = "Moisture " + val + "*C"
                }
            }
        }
    }
}

---

这听起来像是您应该创建一个新的QML文件，并给它一些属性，您可以从

landingScreen

设置这些属性。我把它命名为

SensorRectangle.qml

Rectangle {
    id: sensor
    color: "#ffffff"
    radius: 10

    property string address
    property string title
    property string unit

    Text{
        id: textField

        property var value

        text: sensor.title + " " + value + " " + sensor.unit
        y:50
        font.family: "Helvetica"
        font.pointSize: 24
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Connections
    {
        target: myModel
        onSensorValueChanged:{
            if (addr === sensor.address)
            {
                textField.value = value
            }
        }
    }
}

然后您的登录屏幕变成：

Rectangle {
    id: landingScreen
    x: 0
    y: 0
    width: 800
    height: 350
    color: "#E4E4E4"
    visible: true

    property string path: ""
    property string val: ""

    SensorRectangle {
        id: temperature
        x: 8
        y: 11
        width: 351
        height: 329

        title: "Temperature"
        unit: "°C"
        address: "/root/temp"
    }

    SensorRectangle {
        id: moisture
        x: 369
        y: 13
        width: 209
        height: 157

        title: "Moisture"
        unit: "°C"
        address: "/root/moist"
    }
}