How to customize stack layouts with alignment and spacing

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-customize-stack-layouts-with-alignment-and-spacing]

 

How to customize stack layouts with alignment and spacing

[동영상 강좌 : https://youtu.be/ANlxGi_Bp0o]

다음과 같이 초기화에 값을 제공해서 SwiftUI 스택 내부에 간격을 추가할 수 있습니다.

VStack(spacing: 50) {
    Text("SwiftUI")
    Text("rocks")
}

 

또는, 다음과 같이 항목들 간에 구분자(dividers)를 만들어서 SwiftUI가 스택에 있는 각 항목들 간에 약간 시각적으로 구분하도록 만듭니다. 

VStack {
    Text("SwiftUI")
    Divider()
    Text("rocks")
}

기본적으로, 스택에 있는 항목들은 중앙으로 정렬됩니다. HStack의 경우에 항목들이 중아에 수직으로 정렬되는 것을 의미하므로, 다른 높이의 2개의 텍스트 뷰가 있는 경우에 수직 중앙으로 정렬됩니다. VStack의 경우에 항목들이 가운데에 수평으로 정렬되는 것을 의미하므로, 다른 길이의 2개의 텍스트 뷰가 있는 경우에 수평 중앙으로 정렬됩니다.

 

이를 조정하려면, 다음과 같이 스택을 만들때 정렬을 전달하세요.

VStack(alignment: .leading) {
    Text("SwiftUI")
    Text("rocks")
}

 

그것은 SwiftUI와 rocks 모두 왼쪽 모서리로 정렬할 것이지만, 해당 스택은 필요한 만큼의 공간을 차지하기 때문에, 궁극적으로는 여전히 화면의 중앙에 있을 것입니다. 

 

물론 다음과 같이, 한번에 정렬과 간격을 처리할 수 있습니다.

VStack(alignment: .leading, spacing: 20) {
    Text("SwiftUI")
    Text("rocks")
}

 

2개의 텍스트 뷰 모두 앞쪽(왼쪽에서 오른쪽 언어의 경우에는 왼쪽) 모서리로 수평으로 정렬할 것이고, 그것들 간의 수직 간격에 20포인트를 줄것입니다.