SwiftUI: How to use stacks using HStack and VStack?

A stack is a collection of views which are grouped together. There are three kind of stack views are available i.e HStack, VStack and ZStack.

• HStack: A horizontal stack view which shows views horizontally from left to right.
• VStack: A vertical stack view which shows views vertically from top to bottom.
• ZStack: A depth based stack view which shows views from back to front.

Below is the visual example:

Here are the some of options to align contents of VStack and HStack:

HStack:

• .top: Align subviews to the top of the stack.
• .bottom: Align subviews to the bottom of the stack.
• .center: Align subviews in the middle (default).

VStack:

• .leading: Align subviews to the left.
• .center: Align them in the middle (default).
• .trailing: Align views to the right.

Below is the code to show example of VStack:

Here is the code to show example of HStack:

Any view in SwiftUI is not allowed to have more than 10 child views. Below is the example of error when more than 10 child views are added to HStack:

Note: More than 10 child views are not allowed in SwiftUI and to have more than 10 child views use Group or Stack.