What is ZStack, HStack, VStack on SwiftUI?


ZStack

ZStack is called Depth Stack.

We can arrange the views on layered form.


HStack

We can arrange the views on horizontal direction.


VStack

We can arrange the views on vertical direction.


Example code:

import SwiftUI


struct ContentView: View {

    var body: some View {

        VStack {

            HStack {

                Text("도형 만들기").font(.largeTitle).fontWeight(.heavy)

            }

            HStack {

                Text("둥근 모양").font(.title)

                Spacer()

            }

            ZStack {

                Rectangle().frame(height: 10)

                

                HStack {

                    Circle().fill(Color.yellow)

                    Ellipse().fill(Color.green)

                    Capsule().fill(Color.orange)

                    RoundedRectangle(cornerRadius: 30).fill(Color.gray)

                }

            }

            HStack {

                Text("각진 모양").font(.title)

                Spacer()

            }

            ZStack {

                Rectangle().frame(height: 10)

                

                HStack {

                    Color.red

                    Rectangle().fill(Color.blue)

                    RoundedRectangle(cornerRadius: 0).fill(Color.purple)

                }

            }

            

        }.padding()

    }

}