How to force views to one side inside a stack using Spacer

 

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

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-force-views-to-one-side-inside-a-stack-using-spacer]

 

How to force views to one side inside a stack using Spacer

 

SwiftUI는 기본적으로 뷰를 중앙에 배치하며, 이는 VStack 내부에 3개의 텍스트 뷰를 배치하는 경우에 3개 모두 화면에서 수직으로 중앙에 위치하게 되는 것을 의미합니다. 이를 변경하고자 하는 경우(화면의 상단, 하단, 왼쪽 또는 오른쪽으로 뷰를 강제로 적용하려는 경우)에 Spacer 뷰를 사용해야 합니다. 

 

예를들어, VStack 내부에 하나의 텍스트 뷰를 배치하는 것은, 수직으로 중앙에 있는 것을 의미합니다:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World")
        }
    }
}

 

부모의 상단으로 텍스트 뷰를 밀어넣고자 하는 경우에, 다음과 같이 spacer를 아래에 배치합니다.

VStack {
    Text("Hello World")
    Spacer()
}

 

HStack의 앞쪽과 뒷쪽 모서리에서 2개의 텍스트를 두고자 하는 경우에, 다음과 같이 spacer를 사용합니다.

HStack {
    Text("Hello")
    Spacer()
    Text("World")
}

 

Spacers는 자동으로 모든 남은 공간을 나누며, 이는 여러개의 spacers를 사용하는 경우에 다양한 양의 공간을 나눌수 있는 것을 의미합니다. 

 

예를들어, 텍스트 뷰 앞에 spacer 1개를 넣고 뒤에 2개를 넣어서 부모 뷰의 1/3 아래에 배치될 것입니다:

VStack {
    Spacer()
    Text("Hello World")
    Spacer()
    Spacer()
}