Apr 11
Stacks In SwiftUI: IOS Development -Part-2
H-Stack, V-Stack & Z- Stack
What is a Stack?
A stack is nothing but things that are arranged in an ordered pile. Now since we know what is a stack understanding stacks that are offered by SwiftUI will be much easier for us.
SwiftUI offers three kinds of stacks i.e:
- H-Stack
- V-Stack
- Z-Stack
H-Stack in SwiftUI:
In the above image we’ve two labels once is “Hello” and other one is “World”. Both of them are aligned next to each other these kind of alignment where items are aligned next to each other is called horizontal alignment.
The word “H-Stack” means horizontal stack it stacks the items next to each other from left to right.
To create the effect like above image we use the following code:
- Line 15 we declare a H-Stack
- Line 16 we add a Text label in H-Stack
- Line 17 we set the foreground color for this label
- Line 18 we add some padding around the text label
- Line 20 another Text label in H-Stack
- Line 21 add some padding
- line 23 close the body for H-Stack and add some padding to H-Stack
Now for those who does not know what is padding here is a small definition for you.
Padding is used to create space around an element’s content, inside of any defined borders.
V-Stack in SwiftUI:
In the image above two text label are aligned on a vertical line. This kind of stacking where items are aligned on vertical line from top to bottom or bottom to top is known as vertical aligment.
The word “V-Stack” means vertical stack it stacks the items on a vertical line from top to bottom
The code is exactly the same as H-Stack the only minor change we did:
- Line 15 we changed H-Stack to “V-Stack”
Z-Stack in SwiftUI:
Z- Stack in SwiftUI helps us to create overlapping content e.g you want to place some text on top of a picture.
Z-Stack works on Z-axis it works from bottom to top. The first thing created in a Z-stack will appear at the very bottom. Like in above image:
- Line 17 created a Z-Stack
- Line 18 created an Image View
- Line 22 created a TextView
- Line 25 closed the Z-stack
Since the imageView was created first that is why it appears underneath the text.
Now for those of you who don’t know what is a Z-axis here is a small definition:
Z-axis is the third axis, usually representing depth, of a three-dimensional grid, chart, or graph
In the Image above X is horizontal axis so its the axis for H-Stack. Y is the vertical axis it is the V-Stack axis whereas Z is representing the depth so it is Z-stack.
Now if you like my this article do follow me because I’ll be writing a series on SwiftUI.
