[swift] 스택 뷰에서의 뷰 간 여백 조절

01 Dec 2023

swift

스택 뷰는 iOS 애플리케이션 개발에서 자주 사용되는 UI 컨테이너입니다. 스택 뷰는 뷰를 수직 또는 수평으로 배열할 수 있으며, 뷰 간의 여백을 조절할 수도 있습니다.

이번에는 스택 뷰에서 뷰 간의 여백을 조절하는 방법에 대해 알아보겠습니다. SwiftUI를 사용하여 코드를 작성하도록 하겠습니다.

수직 스택 뷰에서 여백 조절하기

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) { // 16의 여백을 가진 수직 스택 뷰 생성
            Text("View 1")
                .padding() // 뷰 주위에 여백 추가

            Text("View 2")
                .padding(.bottom) // 뷰 아래쪽에만 여백 추가

            Text("View 3")
                .padding(.top) // 뷰 위쪽에만 여백 추가
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

위의 예제 코드에서는 VStack을 사용하여 수직 스택 뷰를 생성하고, spacing 매개변수를 통해 뷰 간의 여백을 조절합니다. padding 뷰 modifier를 사용하여 각 뷰 주위에 여백을 추가할 수도 있습니다. .padding()은 뷰의 모든 방향으로 여백을 추가하고, .padding(.bottom)은 뷰의 아래쪽에만 여백을 추가하며, .padding(.top)은 뷰의 위쪽에만 여백을 추가합니다.

수평 스택 뷰에서 여백 조절하기

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 16) { // 16의 여백을 가진 수평 스택 뷰 생성
            Text("View 1")
                .padding() // 뷰 주위에 여백 추가

            Text("View 2")
                .padding(.trailing) // 뷰 오른쪽에만 여백 추가

            Text("View 3")
                .padding(.leading) // 뷰 왼쪽에만 여백 추가
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

위의 예제 코드에서는 HStack을 사용하여 수평 스택 뷰를 생성하고, spacing 매개변수를 통해 뷰 간의 여백을 조절합니다. padding 뷰 modifier를 사용하여 각 뷰 주위에 여백을 추가할 수도 있습니다. .padding()은 뷰의 모든 방향으로 여백을 추가하고, .padding(.trailing)은 뷰의 오른쪽에만 여백을 추가하며, .padding(.leading)은 뷰의 왼쪽에만 여백을 추가합니다.

이제 여러분은 스택 뷰에서 뷰 간의 여백을 조절하는 방법을 알게 되었습니다. SwiftUI를 사용하여 더 나은 사용자 인터페이스를 만들어보세요.

참고 자료

SwiftUI Documentation