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:
- VStack {
- RoundedRectangle(cornerRadius: 10)
- .fill(Color.yellow)
- .frame(width: 80, height: 80)
- RoundedRectangle(cornerRadius: 10)
- .fill(Color.red)
- .frame(width: 80, height: 80)
- }
Output :
HStack :
If you have two elements in HStack, the two elements will in a horizontal line, as follows:
- HStack {
- RoundedRectangle(cornerRadius: 10)
- .fill(Color.yellow)
- .frame(width: 80, height: 80)
- RoundedRectangle(cornerRadius: 10)
- .fill(Color.red)
- .frame(width: 80, height: 80)
- }
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:
- ZStack {
- RoundedRectangle(cornerRadius: 10)
- .fill(Color.yellow)
- .frame(width: 200, height: 200)
- RoundedRectangle(cornerRadius: 10)
- .fill(Color.red)
- .frame(width: 80, height: 80)
- }
Output :
I hope you will understand the different between VStack, HStack and ZStack in SwiftUI.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.