Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. International
  3. India
  4. [Solved] Qml component property accessing
Forum Updated to NodeBB v4.3 + New Features

[Solved] Qml component property accessing

Scheduled Pinned Locked Moved India
11 Posts 2 Posters 4.7k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    aniljoby
    wrote on last edited by
    #1

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

    }

    @

    1 Reply Last reply
    0
    • p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

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

      157

      1 Reply Last reply
      0
      • A Offline
        A Offline
        aniljoby
        wrote on last edited by
        #3

        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....

        1 Reply Last reply
        0
        • p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #4

          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 : []
          @

          157

          1 Reply Last reply
          0
          • A Offline
            A Offline
            aniljoby
            wrote on last edited by
            #5

            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

            1 Reply Last reply
            0
            • p3c0P Offline
              p3c0P Offline
              p3c0
              Moderators
              wrote on last edited by
              #6

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

              157

              1 Reply Last reply
              0
              • A Offline
                A Offline
                aniljoby
                wrote on last edited by
                #7

                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.

                1 Reply Last reply
                0
                • p3c0P Offline
                  p3c0P Offline
                  p3c0
                  Moderators
                  wrote on last edited by
                  #8

                  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.

                  157

                  1 Reply Last reply
                  0
                  • A Offline
                    A Offline
                    aniljoby
                    wrote on last edited by
                    #9

                    Thank you very much.....

                    1 Reply Last reply
                    0
                    • p3c0P Offline
                      p3c0P Offline
                      p3c0
                      Moderators
                      wrote on last edited by
                      #10

                      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].

                      157

                      1 Reply Last reply
                      0
                      • A Offline
                        A Offline
                        aniljoby
                        wrote on last edited by
                        #11

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

                        }

                        @

                        1 Reply Last reply
                        0

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved