Stacks In SwiftUI: IOS Development -Part-2

H-Stack, V-Stack & Z-Stack in swiftUI
H-Stack, V-Stack & Z-Stack in swiftUI

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:

H-Stack in SwiftUI
  • 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
H-stack and V-Stack in SwiftUI
H-Stack swiftUI

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:

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

V-Stack in SwiftUI
V-Stack in SwiftUI

The code is exactly the same as H-Stack the only minor change we did:

  • Line 15 we changed H-Stack to “V-Stack”
V-Stack in SwiftUI

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 in SwiftUI
Z-Stack SwiftUI

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

Z-Stack in SwiftUI

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.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store