SwiftUI01 - Stack(HStack, VStack, ZStack)

body에서 some View를 리턴할 때, SwiftUI는 화면에 표시될 수 있는 뷰를 받을 것을 기대한다. 그것은 내비게이션 뷰나 form, text View 같은 것들이지만 View protocol을 준수해야 한다. 

body 안에 view 두 개를 띄우면 canvas에 preview가 두 개가 뜬다. body 안의 두 가지 뷰는 독립적이라고 Swift가 판단하기 때문이다. (preview canvas 실행 단축키 : command + option + p)

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
        Text("Hello, Swift!!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

끔찍한 광경

그래서 써야하는 방법은 Stack을 활용하는 것이다. 

VStack은 뷰를 세로로 배치한다. 기본적으로 VStack은 뷰를 가운데 정렬한다.
alignment 프로퍼티를 이용하면 정렬 방법을 바꿀 수 있다(.leading : 왼쪽 정렬, .trailing: 오른쪽 정렬)
spacing 프로퍼티를 이용하면 스택 내부의 뷰의 간격을 설정할 수 있다. (VStack은 세로간격, HStack은 가로간격) - padding()과는 다르다. padding()은 Stack과 뷰 사이의 간격을 설정하는 것이다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Hello, world!")
            Text("Hello, Swift!!")
        }
        .padding()
    }
}

Stack은 최대 10개의 독립적인 뷰를 가질 수 있다. 10개가 넘어가면 오류가 난다.

HStack은 뷰를 가로로 배치한다.

struct ContentView: View {
    var body: some View {
        HStack(spacing: 20) {
            Text("Hello, world!")
            Text("Hello, Swift!!")
        }
        
    }
}

ZStack은 뷰를 앞 뒤로 배치한다. 포토샵의 레이어 같은 역할을 한다고 생각하면 편하다.

struct ContentView: View {
    var body: some View {
        ZStack {
            Text("Hello, world!")
            Text("Hello, Swift!!")
        }
    }
}

텍스트 뷰를 ZStack 으로 배치하면 겹치기 때문에 거의 사용할 일이 없고 이미지를 배경으로 하고 그 앞에 텍스트를 배치하는 등의 방식으로 사용한다. 뷰 들을 앞뒤로 배치하는 ZStack의 기능 때문에 spacing 프로퍼티는 없다. alignment 프로퍼티 존재하는데, 뷰들 간의 순서를 결정한다.