qml use same rectangle component for multiple objects

Question

I am trying to reduce the size of qml file by calling same rectangle component and changing only the required fields and keep the rest same.

The part shown below is working but want to reduce the size.

Basically, I dont want to make moisture rectangle. I want to use temperature rectangle and modify say "x " value and inside connections modify only "path". Is that possible if yes than how ? thank you !!!

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

score 2 · Accepted Answer · answered Nov 13 '19 at 10:46

This sounds like you should just create a new QML file and give it some properties which you can set from the landingScreen. I named it 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
            }
        }
    }
}

And then your landing screen becomes:

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 use same rectangle component for multiple objects

1 Answers1