[Solved] Qml component property accessing



  • I have two qml files namely rect.qml and a main.qml. When i clicked the mouse area region of main.qml a rectangle having size, color from rect.qml is created in main.It is fine.The rect.qml have the ability to increase/decrease the width of the rectangle too.

    I want to save the width into variables created in main.qml. If I created two rectangles and saved its width into two variables,and if i select the first rectangle and resized, it should be updated to its own variable.

    main.qml
    @import QtQuick 2.0

    Item{
    id:root
    width: 640
    height: 540
    property int w1 //to get the width of first rectangle
    property int w2 //to get the width of second rectangle
    Rectangle {
    id:rect
    anchors.fill: parent
    MouseArea {
    anchors.fill: parent
    onClicked: {
    Qt.createComponent("Rect.qml").createObject(parent, {x: mouseX, y: mouseY})

    //what to do here?
    /Also if changed the width of any of the two rectangles, the corresponding variable should get updated/

    }
    }

    }
    }

    @

    Rect.qml
    @

    import QtQuick 2.0

    Rectangle {
    id: rect
    color: "yellow"
    width: 50
    height: 50
    MouseArea {
    id: right

        width: 8
        height: parent.height
        anchors.right: parent.right
       
        property int oldMouseX
        hoverEnabled: true
        onPressed: {
            oldMouseX = mouseX
        }
    
        onPositionChanged: {
           if (pressed) {
              rect.width = rect.width + (mouseX - oldMouseX)
           }
       }
    }
    

    }

    @


  • Moderators

    Hi,

    Would there be fixed amount of Rectangles ?
    I'm asking since if they are limited you can create those many variables in main.qml and access the required variable directly from Rect.qml.
    You can assign the variable a new value in Rect.qml here:
    @
    onPositionChanged: {
    if (pressed) {
    rect.width = rect.width + (mouseX - oldMouseX)
    w1 = rect.width // for first rectangle
    }
    }
    @



  • But if i have 5 rectangles what to do?
    My requirement is that, if the width of any one of the 5 rectangle is changed after creating all the 5, the corresponding variable should be get updated,how to do that...
    and thanks for your reply....


  • Moderators

    So to make it more dynamic you can create a array in main.qml and access that array from the Rect.qml to store the corresponding widths.
    To create an array,
    @
    property var rectWidths : []
    @



  • OK.
    If i edit one of the rectangles' width after creating all the five. Will that width will be updated in the corresponding memory of the array


  • Moderators

    You will need to update the corresponding element in the array from the Rect of which you are modifying the width.



  • Sir can you please edit the code with this concept (you said right now). I don't know how to code that.Hope you help.
    I am looking forward for your kind reply.


  • Moderators

    Here,
    main.qml
    @
    import QtQuick 2.0

    Item{
    id:root
    width: 640
    height: 540
    //property int w1 //to get the width of first rectangle
    //property int w2 //to get the width of second rectangle
    property var rectWidths : []
    property int index: 0
    Rectangle {
    id:rect
    anchors.fill: parent
    MouseArea {
    anchors.fill: parent
    onClicked: {

                Qt.createComponent("Rect.qml").createObject(parent, {x: mouseX, y: mouseY, index: index++})
           }
        }
    }
    
    Rectangle { //click on this to get updated rect widths from array
        color: "red"
        width: 40
        height: 40
        MouseArea {
            anchors.fill: parent
            onClicked: {
                for(var i=0;i<rectWidths.length;i++)
                    console.log("Width of Rect no",i,"is",rectWidths[i])
            }
        }
    }
    

    }
    @

    And,
    Rect.qml
    @
    import QtQuick 2.0

    Rectangle {
    id: rect
    color: "yellow"
    width: 50
    height: 50

    property alias index: rect.itemId
    property int itemId
    
    MouseArea {
        id: right
    
        width: 8
        height: parent.height
        anchors.right: parent.right
    
        property int oldMouseX
        hoverEnabled: true
        onPressed: {
            oldMouseX = mouseX
        }
    
        onPositionChanged: {
            if (pressed) {
                rect.width = rect.width + (mouseX - oldMouseX)
                rectWidths[itemId] = rect.width
            }
        }
    }
    

    }
    @

    Hope this is what you expect.



  • Thank you very much.....


  • Moderators

    You are Welcome :)
    So, if you think the question is solved you can mark it as solved by editing the thread title and prepend [Solved].



  • main.qml
    @import QtQuick 2.0

    Item{
    id:root
    width: 640
    height: 540
    property int count:0
    property var rectangle:[]

    Rectangle {
    id:rect
    anchors.fill: parent
    MouseArea {
    anchors.fill: parent
    onClicked: {

    rectangle[count]=Qt.createComponent("Rect.qml").createObject(parent, {x: mouseX, y: mouseY})

    count++

    //here we can create number of rectangles,
    //rectangle[0].width will have the width of first rectangle
    //rectangle[0].height will have the height of first rectangle
    //rectangle[0].x will have the xpos of first rectangle
    //rectangle[0].y will have the ypos of first rectangle
    /editing a rectangle after its creation will be automatically updated in the corresponding array,so we need not to be care about that/
    //count will have number of rectangles created

    }
    }

    }
    }

    @

    Rect.qml
    @

    import QtQuick 2.0

    Rectangle {
    id: rect
    color: "yellow"
    width: 50
    height: 50
    MouseArea {
    id: right

        width: 8
        height: parent.height
        anchors.right: parent.right
       
        property int oldMouseX
        hoverEnabled: true
        onPressed: {
            oldMouseX = mouseX
        }
    
        onPositionChanged: {
           if (pressed) {
              rect.width = rect.width + (mouseX - oldMouseX)
           }
       }
    }
    

    }

    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.