SwiftUI로 IOS 개발하기(3) - StackView

안녕하세요. 뉴핀입니다.

이번 주제는 SwiftUI에서 레이아웃을 구성할 때 사용하는 StackView에 대해서 알려 드리려고 합니다.

StackView란 레이아웃을 구성하기 위해 View 배열을 인자로 받는 View입니다.

ex) Android Native의 ViewGroup(LinearLayout, ConstraintLayout), Flutter의 Flex(Column, Row) 등

StackView는 총 3가지로 구성되어 있습니다.

HStack : horizontal, 가로로 배열되는 성질을 가지고 있다.

VStack : vertical, 가로로 배열되는 성질을 가지고 있다.

ZStack : z 축, 겹쳐서 배열되는 성질을 가지고 있다.

사용법은

var body: some View {
    VStack{
        Text("Hello, world!")
            .padding()
        Text("Hello, world!")
            .padding()
    }
}

위와 같으며 빌드해보면

세로 배열로 뷰들이 정렬되는 것을 확인하실 수 있습니다.

VStack의 고유 속성으로는

위와 같이 생성자로 설정할 수 있습니다.

1. alignment : 교차되는 정렬(HStack = 세로, VStack = 가로) 방식.
2. spacing : 요소마다의 간격.
3. content : 내용, 위 예시에서는 Text 두 개를 내용에 담았습니다.

예시 요구사항으로

1. 세로로 배치되는 요소
2. 오른쪽 정렬
3. 간격 20
4. 길이가 다른 Text 3종류

가 있다면

var body: some View {
    VStack(alignment: .trailing, spacing: 20){
        Text("lorem")
        Text("lorem ipsum")
        Text("lorem ipsum lorem ipsum")
    }
}

위와 같이 구현 가능합니다. 

여기서 content에 대한 내용은 Swift에서 지원하는 후행 클로저를 사용하여 설정하며

VStack의 가로 정렬을. trailing으로 설정하였기 때문에 오른쪽으로 정렬됩니다.

.trailing 이란?

Swift에서 사용하는 Alignment 요소
.leading : 시작
.trailing : 끝

---

오늘은 SwiftUI의 StackView들에 대한 내용을 알아봤습니다.

이를 토대로 앞으로 작성하게 될 프로젝트의 기본적인 레이아웃을 구성하실 수 있게 되었습니다.

다음에는 더 유익한 내용으로 찾아뵙겠습니다.

감사합니다.