[SwiftUI] stack과 frame의 alignment

민니·2022년 10월 21일

SwiftUI

목록 보기

1/1

💡 stack을 init할 때 쓰는 alignment 파라미터와 frame의 alignment 파라미터를 사용할 때의 차이점은 무엇일까?

VStack을 하나 만들어보자

struct ContentView: View {
    var body: some View {
        VStack {
            Text("1")
            Text("2")
            Text("3")
        }
        .frame(width: 300, height: 200)
        .background(.orange)
    }
}

1,2,3 Text를 추가해 주고, frame을 지정해 준 뒤, 배경색을 오렌지 색으로 지정해 주었다.

VStack의 초기화

📌 지정된 간격과 수평 정렬로 인스턴스를 만든다.
📌 VStack의 alignment 파라미터는 HorizontalAlignment를 이용하여 정렬한다.
📌 alignment의 디폴트는 center

잉 VStack인데 horizontal? 먼 소리지 싶어서 당장 다 갈겨 본다...

VStack의 alignment

var body: some View {
        VStack(alignment: .leading) {
            Text("1")
            Text("2")
            Text("3")
        }
        .frame(width: 300, height: 200)
        .background(.orange)
    }

디폴트가 center였으니 leading으로 변경해 주었으나 딱히 변화가 없다. 혹시나 싶어서 첫 Text를 더 길게 써보았음

VStack alignment - center

var body: some View {
        VStack(alignment: .center) {
            Text("12345")
            Text("2")
            Text("3")
        }
        .frame(width: 300, height: 200)
        .background(.orange)
    }

VStack alignment - leading

VStack(alignment: .leading)

VStack alignment - trailing

 VStack(alignment: .trailing)

아 스택의 내부 요소들의 수평 정렬이란 게 요걸 의미하는 거였구만
그렇다면 HStack의 alignment는 내부 요소들의 수직 정렬을 결정하겠군

실제로 그렇게 되어있기두 함

frame의 alignment

📌 지정된 크기의 보이지 않은 frame 내에 보기를 배치함
📌 alignment 파라미터는 frame 내에서 이 뷰의 정렬을 정의
📌 alignment의 디폴트는 center

	ㄴ alignment를 타고 들어가면 이렇게 많은 친구들을 볼 수 있음 ❗️

frame - center

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center) {
            Text("12345")
            Text("2")
            Text("3")
        }
        .frame(width: 300, height: 200, alignment: .center)
        .background(.orange)
    }
}

frame - leading

frame(width: 300, height: 200, alignment: .leading)

frame - trailing

frame(width: 300, height: 200, alignment: .trailing)