qml use same rectangle component for multiple objects - qt

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

Answer 1

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