If you’re designing your iOS app with SwiftUI, it’s important to know the fundamental ideas of Stacks, notably HStack, VStack, and ZStack, and the right way to use them. On this tutorial, we are going to discover these three kinds 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 have now 2 Textual content labels.
HStack {
Textual content ("Howdy" )
.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 prepare all the weather/views inside it vertically. Beneath picture is having a VStack and you may clearly see that it arranges views vertically moderately than horizontally(which was the case after we used HStack)
VStack {
Textual content ("Howdy" )
.font(.title)
.background (.yellow)
Textual content ("World!")
.font(.title)
.background (.inexperienced)
}
. padding()
.background (.crimson)
ZStack
ZStack – This stack view is totally different from each HStack and Vstack. After we add views to this ZStack, it aligns view on prime of one another. Although we are able to change the looks order of added views by giving them z-index worth. Larger z-axis worth than the one earlier than it, means later sub-view seem “on prime” of earlier ones.
Abstract
On this publish, we study several types of stacks utilized in SwiftUI, i.e. HStack is used to put view horizontally, VStack is used to put views vertically and ZStack is used after we need views on prime 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.
