ios – SwiftUI view centring behaviour on utilizing new body modifier

The way in which structure works in SwiftUI is that mother or father views proposes a dimension to their kids, and the youngsters chooses how giant they wish to be, primarily based on the proposal. Observe that some views can ignore the proposal utterly.

From the documentation, what body(width:top:alignment:) does is,

Positions this view inside an invisible body with the required dimension.

We will perceive this as proposing a selected dimension to the view that body is modifying. After the view chooses its dimension primarily based on the proposal, it’s aligned within the body primarily based on alignment. The default worth of the alignment parameter is .middle, in order that’s why views are centered within the body by default.

The way in which a Rectangle chooses its dimension, is that it resizes itself to the identical dimension because the proposal (all Forms behave like this). Subsequently, it should at all times cowl all the body you specified. This is the reason altering the alignment of the primary body modifier doesn’t do something – a view that covers all the body appears the identical irrespective of how it’s aligned contained in the body.

The body(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:) modifier additionally positions the view it’s modifying in a body, nevertheless it provides the scale proposal in another way. It takes the scale proposal it obtained from its mother or father, and clamps it to the minutes and maxes.

So on this case,

• the display screen first proposes the display screen’s width and top to your view
• .body(maxHeight:100) receives the scale proposal and creates an invisible body with the display screen’s width and top of 100pt. It adjustments the scale proposal’s top to 100 and passes it down.
• .padding() receives the scale proposal and chooses its dimension to be the identical because the proposed dimension. It additional reduces the scale proposal’s width and top by some system-defined padding quantity and passes the proposal down.
• .body(maxWidth: .infinity) receives the scale proposal and provides an invisible body of the identical dimension as the scale proposal. (The orange .background is added to this body.) It does not change the scale proposal and passes it down.
• .body(width: 130) receives the scale proposal and ignores the proposed width. It creates an invisible body with width 130pt and identical top as the scale proposal. The scale proposal’s width is now modified to 130pt.
• Lastly, the Rectangle receives the scale proposal and chooses its dimension to be 130pt vast.

Notably, the body added by .body(width: 130) is much less vast than the body added byc.body(maxWidth: .infinity), so altering the alignment parameter of the broader body from .middle to .trailing visibly makes a distinction.