What is different between VStack, HStack and ZStack in SwiftUI?

We don't know what is different between VStack, HStack and ZStack in SwiftUI? Let's look through these definitions in Apple Developer official website:

VStack

A view that arranges its children in a vertical line.

HStack

A view that arranges its children in a horizontal line.

ZStack

A view that overlays its children, aligning them in both axes.

These are three example about them

VStack :
If you have two elements in VStack, the two elements will in a vertical line,  as follows:

1. VStack {
2.     RoundedRectangle(cornerRadius: 10)
3.         .fill(Color.yellow)
4.         .frame(width: 80, height: 80)
5. 
   
6.     RoundedRectangle(cornerRadius: 10)
7.         .fill(Color.red)
8.         .frame(width: 80, height: 80)
9. }

Output :



HStack : 
If you have two elements in HStack, the two elements will in a horizontal line, as follows:

1. HStack {
2.     RoundedRectangle(cornerRadius: 10)
3.         .fill(Color.yellow)
4.         .frame(width: 80, height: 80)
5. 
   
6.     RoundedRectangle(cornerRadius: 10)
7.         .fill(Color.red)
8.         .frame(width: 80, height: 80)
9. }

Output :



ZStack : 

Arrange the elements in the Z index, if you have two element inside the ZStack then first element is below the second element, as follows:

1. ZStack {
2.     RoundedRectangle(cornerRadius: 10)
3.         .fill(Color.yellow)
4.         .frame(width: 200, height: 200)
5. 
   
6.     RoundedRectangle(cornerRadius: 10)
7.         .fill(Color.red)
8.         .frame(width: 80, height: 80)
9. }

Output :



I hope you will understand the different between VStack, HStack and ZStack in SwiftUI.