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.
