[iOS - SwiftUI] HStack의 alignment 파라미터 잘 활용하기 (VerticalAlignment)

Alignment 파라미터 잘 활용하기

• 보통은 HStack, VStack을 사용하면 alignment을 거의 안쓸 수가 있는데 이를 활용하면 여러가지 뷰를 조금 더 쉽게 표현이 가능

HStack(alignment:)
VStack(alignment:)

• 먼저 alignment 타입 확인해보면, HStack은 VerticalAlignment 타입이고, VStack은 HorizontalAlignment 타입
  • 주의) "HStack은 수평이니 HorizontalAlignment"라고 잘못 생각하는 경우 주의
  • alignment는 스택 방향과 반대 방향을 의미함

// VStack 정의 형태
@frozen public struct VStack<Content> : View where Content : View {
   @inlinable public init(alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, @ViewBuilder content: () -> Content)
}

// HStack 정의 형태
@frozen public struct HStack<Content> : View where Content : View {
   @inlinable public init(alignment: VerticalAlignment = .center, spacing: CGFloat? = nil, @ViewBuilder content: () -> Content)
}

VerticalAlignment 기능

• center (디폴트): 왼쪽에서 오른쪽으로 뷰가 추가되어 있을 때, 세로 부분의 여백이 생길땐 center 정렬

HStack(alignment: .center, spacing: 12) {
    Text("123")
    Text("abc")
    Text("456")
    Text("drf\n\n890")
}
.background(Color.yellow)

세로 부분의 여백이 생김 > 뷰들을 세로 center 정렬

• top: 왼쪽에서 오른쪽으로 뷰가 추가되어 있을 때, 세로 부분의 여백이 생길땐 상단으로 붙이기

HStack(alignment: .top, spacing: 12) {
    Text("123")
    Text("abc")
    Text("456")
    Text("drf\n\n890")
}
.background(Color.yellow)

세로 부분의 여백이 생김 > 뷰들을 세로 top 정렬

• firstTextBaseline
  • 여러줄로 표현되는 텍스트의 첫 번째 줄 기준으로 정렬하는 것

HStack(alignment: .firstTextBaseline) {
    Text("Short")
        .font(.largeTitle)

    Text("This is a\nmultiline text\n.firstTextBaseline")
        .font(.body)
        .border(.red)
}
.border(.blue)

첫번째 라인인 "this is a" 기준으로 Short 뷰가 정렬됨

• lastTextBaseline
  • 여러줄로 표현되는 텍스트의 마지막 줄 기준으로 정렬하는 것

HStack(alignment: .lastTextBaseline) {
    Text("Short")
        .font(.largeTitle)

    Text("This is a\nmultiline text\n.lastTextBaseline")
        .font(.body)
        .border(.red)
}
.border(.green)

마지막 라인인 .lastTextBaseline을 기준으로 Short 뷰가 정렬됨