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

Question

我试图通过调用相同的矩形组件并仅更改必填字段并保持其余字段相同来减小 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"
                }
            }
        }
    }
}

Answer 1

听起来您应该只创建一个新的 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"
    }
}