If you’re designing your iOS app with SwiftUI, it’s important to grasp the fundamental ideas of Stacks, significantly HStack, VStack, and ZStack, and how one can use them. On this tutorial, we’ll discover these three sorts of stacks.
HStack
HStack – H in HStack stands for Horizontal. This stack view arranges all the weather/views inside it horizontally. Under picture has a HStack and contained in the HStack we have now 2 Textual content labels.
HStack {
Textual content ("Good day" )
.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. Under picture is having a VStack and you’ll clearly see that it arranges views vertically slightly than horizontally(which was the case once we used HStack)
VStack {
Textual content ("Good day" )
.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. Greater z-axis worth than the one earlier than it, means later sub-view seem “on high” of earlier ones.
Abstract
On this submit, we find out about various kinds 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 once 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 fundamental understanding of those 3 stack views.
