Stack in SwiftUI

In previous post we have used Stack but i have not explained it there.
SwiftUI allows us to add nested Stacks too means you can have a HStack inside a VStack or vice-versa or any other combinations.

SwiftUI has categorized Stack into 3 types:
1. HStack - Horizontal Stack
2. VStack - Vertical Stack
3. ZStack - Z Index Stack

1. HStack - If you want to place UI horizontally use this type.

Code Snipped:

struct ContentView: View {

    var body: some View {

        HStack {

            Color(.red)

            Color(.blue)

        }

    }

}

Explanation - Here i have created a HStack and added two Color's namely red and blue.
Now you would like to ask me how you can add a Color instead of a View!!!
So in SwiftUI we can treat Color also as a View, let me elaborate it.
It will draw a View within a provided space by the HStack and fill it with the provided Color and returns it as a View.

Output of Code Snippet:




2. VStack - This will add a Vertical Stack to your View.

Code Snippet:

struct ContentView: View {

    var body: some View {

        VStack {

            Color(.red)

            Color(.blue)

        }

    }

}

Explanation - Similar to HStack here we have the VStack it will place the items in Vertical manner. Red color on top and blue color on bottom.


Output of Code Snippet:



























3. ZStack - If you want to place items one above another this is the one you can use.

Code Snippet:

struct ContentView: View {

    var body: some View {

        ZStack {

            Color(.red)

            Text("This is On the Top of Red Color View")

                .foregroundColor(.white)

        }

    }

}

Explanation -
Sometimes we need to place some item above other, like a Text on Image. So here we have a ZStack here to make it simple. I have placed a Text above the Color.

Output of Code Snippet:



Here is a code snippet for nested Stack:

struct ContentView: View {

    var body: some View {

        HStack {

            VStack {

                Color(.red)

                Color(.green)

            }

            Color(.blue)

        }

    }

}

Explanation - I have added a VStack inside HStack, so the left side will have two Color Views red and green.

Output of Code Snipped: