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

Question

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

下面显示的部分正在运行，但想要减小尺寸。

基本上，我不想制作水分矩形。 我想使用 温度矩形并修改 "x " 值，内部连接仅修改 "path"。如果可以，那有可能吗？谢谢！！！

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"
    }
}

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

qml use same rectangle component for multiple objects

qt

qml

qqmlcomponent