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

Anchors or SetWidth/Height of a component



  • 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?



  • 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
    


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


Log in to reply