Anchors or SetWidth/Height of a component

Anita

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ï

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

GabrielRR

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.