Unsolved 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 examplesRectangle{ 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.