Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

qml use same rectangle component for multiple objects



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


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

Log in to reply