WooKoo Blog

물과 같이

개발/개발

[SwiftUI] - StackView 스택뷰

WooKoo 2020. 9. 7. 19:45

 

 

 

UIKit의 UIStackView는 선택적인 요소 였다면 SwiftUI의 Stack은 거의 필수적인 요소이다.

 

여러개의 컨텐츠를 표현할 때 반드시 사용해야한다.

 

HStack, VStack, ZStack이 있다.

 

        HStack{
            Rectangle()
                .fill(Color.green)
                .frame(width: 150, height: 150)
            
            Rectangle()
                .fill(Color.yellow)
                .frame(width: 150, height: 150)
        }

 

 

Horizontal Stack의 모습이다.

 

Vstack

이런 모습이다!

 

그럼? 

ZStack은???

 

깊이 스택이기때문에 초록색을 노란색 사각형이 덮은 모습이라 안보이는 것이다.

 

offset으로 확인해보면 정말 그런지 볼 수 있다.

        ZStack{
            Rectangle()
                .fill(Color.green)
                .frame(width: 150, height: 150)
            
            Rectangle()
                .fill(Color.yellow)
                .frame(width: 150, height: 150)
                .offset(x:40, y: 40
            )

이런식이다!!

 

아무 것도 입력 안했을 때 가운데 위치하고 그런 것들은 기본 값으로 설정되어있는 것이다.

매개변수의 spacing은 원하는 간격만큼 객체가 떨어져있을 수 있도록한다.

 

Alignment는 정렬로 스택뷰 안의 객체들을 정렬 시킬 수 있다.

출처: 스윗한 스위프트유아이