Layout adjustments
Make fine adjustments to alignment, spacing, padding, and other layout parameters.
Overview
Layout containers like stacks and grids provide a great starting point for arranging views in your app’s user interface. When you need to make fine adjustments, use layout view modifiers. You can adjust or constrain the size, position, and alignment of a view. You can also add padding around a view, and indicate how the view interacts with system-defined safe areas.
[Image]
To get started with a basic layout, see Layout fundamentals. For design guidance, see Layout in the Human Interface Guidelines.
Topics
Fine-tuning a layout
Adding padding around a view
padding(_:)padding(_:_:)padding3D(_:)padding3D(_:_:)scenePadding(_:)scenePadding(_:edges:)ScenePadding
Influencing a view’s size
frame(width:height:alignment:)frame(depth:alignment:)frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)frame(minDepth:idealDepth:maxDepth:alignment:)containerRelativeFrame(_:alignment:)containerRelativeFrame(_:alignment:_:)containerRelativeFrame(_:count:span:spacing:alignment:)fixedSize()fixedSize(horizontal:vertical:)layoutPriority(_:)
Adjusting a view’s position
Making fine adjustments to a view’s positionposition(_:)position(x:y:)offset(_:)offset(x:y:)offset(z:)
Aligning views
Aligning views within a stackAligning views across stacksalignmentGuide(_:computeValue:)AlignmentHorizontalAlignmentVerticalAlignmentDepthAlignmentAlignmentIDViewDimensionsViewDimensions3DSpatialContainer
Setting margins
Staying in the safe areas
ignoresSafeArea(_:edges:)safeAreaInset(edge:alignment:spacing:content:)safeAreaPadding(_:)safeAreaPadding(_:_:)SafeAreaRegions
Setting a layout direction
layoutDirectionBehavior(_:)LayoutDirectionBehaviorlayoutDirectionLayoutDirectionLayoutRotationUnaryLayout