In case you are designing your iOS app with SwiftUI, it’s important to grasp the fundamental ideas of Stacks, significantly HStack, VStack, and ZStack, and how you can use them. On this tutorial, we are going to discover these three varieties of stacks.
HStack
HStack – H in HStack stands for Horizontal. This stack view arranges all the weather/views inside it horizontally. Beneath picture has a HStack and contained in the HStack we now have 2 Textual content labels.
HStack {
Textual content ("Whats up" )
.font(.title)
.background (.yellow)
Textual content ("World!")
. font(.title)
.background (.inexperienced)
}
. padding()
.background (.crimson)
VStack
VStack – V in VStack stands for Vertical. This stack will organize all the weather/views inside it vertically. Beneath picture is having a VStack and you may clearly see that it arranges views vertically slightly than horizontally(which was the case after we used HStack)
VStack {
Textual content ("Whats up" )
.font(.title)
.background (.yellow)
Textual content ("World!")
.font(.title)
.background (.inexperienced)
}
. padding()
.background (.crimson)
ZStack
ZStack – This stack view is completely different from each HStack and Vstack. After we add views to this ZStack, it aligns view on high of one another. Although we will change the looks order of added views by giving them z-index worth. Increased z-axis worth than the one earlier than it, means later sub-view seem “on high” of earlier ones.
Abstract
On this put up, we study several types of stacks utilized in SwiftUI, i.e. HStack is used to position view horizontally, VStack is used to position views vertically and ZStack is used after we need views on high of one another inside a container view. Since stacks are the fundamental constructing block whereas we design iOS app utilizing SwiftUI so we have to have primary understanding of those 3 stack views.
