Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Unsolved Anchors or SetWidth/Height of a component

    QML and Qt Quick
    3
    3
    139
    Loading More Posts
    • 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
      Anita last edited by

      We can set the dimensions of a components in any of the following two methods.
      Method1:
      Main.qml
      Rectangle{
      id:mainRect
      width:1280
      height:720
      Rectangle{
      width: mainRect.width -2
      height:mainRect.height-2
      anchors.top:mainRect
      anchors.topMargin:2
      anchors.left:mainRect
      anchors.leftMargin:2
      }
      }
      /// Second Method:
      Main.qml
      Rectangle{
      id:mainRect
      width:1280
      height:720
      Rectangle{
      anchors.top: mainRect.top
      anchors.topMargin: 2
      anchors.left: mainRect.left
      anchors.leftMargin: 2
      anchors.bottom: mainRect.bottom
      anchors.bottomMargin: 2
      anchors.right: mainRect.right
      anchors.rightMargin: 2
      }
      }

      Is there any advantage of any method over the other or will the 2nd method affect performance in any way?

      ODБOï 1 Reply Last reply Reply Quote 0
      • ODБOï
        ODБOï @Anita last edited by ODБOï

        hi
        @Anita said in Anchors or SetWidth/Height of a component:

        performance

        Please see Important Concepts In Qt Quick - Positioning .
        And this is shorter version of your examples

         Rectangle{
                id:mainRect
                width:1280
                height:720
                color: "red"
                Rectangle{
                    color: "lightgrey"
                    anchors.fill: parent
                    anchors.margins: 2
                }
            }
        

        Also, you can group your anchors like this

        anchors {
         top: obj.top
         bottom : obj.bottom
        }
        

        instead of

        anchors.top : obj.top
        anchors.bottom : obj.bottom
        
        1 Reply Last reply Reply Quote 0
        • GabrielRR
          GabrielRR last edited by

          Here are basically the two methods you posted. There are several ways to handle the implementation without any real different but you need to keep in mind what could happen depending on your implementation.

          On the first method you reduce the child width/height by 2, meaning that this rectangle will be aligned with the bottom and right of both rectangles but anchored to the top and left of the parent rectangle. This is fine but, you could run into errors since it would be easier just to set the bottom and right anchors and the result will be the same without the use of any margin.
          Method1:

          Rectangle
          {
              id:mainRect
              width:1280
              height:720
              Rectangle
              {
                  width: mainRect.width - 2
                  height:mainRect.height - 2
                  anchors: 
                  {
                      top: parent.top
                      topMargin: 2
                      left: parent.left
                      leftMargin: 2
                  }
              }
          }
          

          The method 2 has a problem, since you set a margin = 2 for top/bottom/left/right your child rectangle won't work properly since you are expecting it to fit inside a parent rectangle with not enought space. A width of 1278 and 718 height is needed but you only got 1276px for width and 716px after taking in count the margins so the child rectangle won't work properly.

          Method2

          Rectangle
          {
              id:mainRect
              width:1280
              height:720
              Rectangle
              {
                  width: mainRect.width - 2
                  height:mainRect.height - 2
                  anchors: 
                  {
                      top: parent.top
                      topMargin: 2
                      left: parent.left
                      leftMargin: 2
                      bottom: parent.bottom
                      bottomMargin: 2
                      right: parent.right
                      rightMargin: 2
                  }
              }
          }
          

          There are several ways to implement this type of objects but you need to keep in mind as @LeLev mentions the Concepts in Qt Quick - Positioning since every minor change can lead into an issue.

          Lic-Ing. Jose Gabriel Lopez Villalobos
          Embedded Software Engineer
          RidgeRun Engineering Ltd.
          www.ridgerun.com
          Email: gabriel.lopez@ridgerun.com

          1 Reply Last reply Reply Quote 0
          • First post
            Last post