[SwiftUI] - StackView 조합해보기

 

 

 

위와 같은 UI를 구성하려고한다.

전체코드

    var body: some View {
        VStack{
            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()

 

소스들을 보면 각 도형들은 위치에 맞게 크기가 변한다는 것을 알 수 있다.

또한 뒤에 보이는 검정색 사각형의 경우는 ZStack을 추가해서 구현을 할 수 있다.

 

---

출처

Sweet한 SwiftUI