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 easy methods to use them. On this tutorial, we’ll 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. Under picture has a HStack and contained in the HStack we’ve got 2 Textual content labels.
HStack {
Textual content ("Hey" )
.font(.title)
.background (.yellow)
Textual content ("World!")
. font(.title)
.background (.inexperienced)
}
. padding()
.background (.purple)
VStack
VStack – V in VStack stands for Vertical. This stack will prepare 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 ("Hey" )
.font(.title)
.background (.yellow)
Textual content ("World!")
.font(.title)
.background (.inexperienced)
}
. padding()
.background (.purple)
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. Larger z-axis worth than the one earlier than it, means later sub-view seem “on high” of earlier ones.
Abstract
On this publish, we find out about 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 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.
