qml use same rectangle component for multiple objects

[Mandeep.Chaudhary]

Hi,

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

[Mandeep.Chaudhary]

The nearest i go was using component and loader. but problem is declaring path is again a problem.

```

Component {
        id: redSquare

        Rectangle {
            id: temperature
            x: 8
            y: 11
            width: 351
            height: 329
            color: "#ffffff"
            radius: 10
            property string path: "/root/temp"
            property string val: ""

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

    Loader { sourceComponent: redSquare }

 //   Loader { sourceComponent: redSquare ; x:369; path:"/root/moist"}