[TIL/SwiftUI] padding modifier 정리
padding modifier 사용하기
예시
Text("Some Text")
.padding(10)
Text("Some Text")
.padding(.leading, 20)
padding(_:)
Adds a different padding amount to each edge of this view.
nonisolated func padding(_ insets: EdgeInsets) -> some View
nonisolated : Actor 관련 참조, nonisolated는 Swift에서 Actor 모델의 동시성 규칙을 무시하고, 메서드나 속성을 actor와 상관없이 호출할 수 있도록 선언하는 키워드
Parameters
An EdgeInsets
instance that contains padding amounts for each edge.
padding()을 사용하는 방법이 꽤 다양한데, 매번 검색을 하다가 이번 기회에 정리하게 됐다. View에 패딩을 추가하기 위해서 사용하는 매서드에는 padding(_:)
또는 padding(_:_:)
두 가지가 있다.
padding(_:)
의 경우 파라미터로 insets
또는 length
를 가진다.
// 파라미터로 insets를 사용하는 경우
func padding(_ insets: EdgeInsets) -> some View
// 사용 예시
// 각 edge마다 별개의 값을 줄 수 있다.
Text("Hello world!")
.padding(EdgeInsets(top: 10, leading: 20, bottom: 40, trailing: 10))
// 파라미터로 length를 사용하는 경우
// 모든 edge에 동일한 값으로 패딩을 줄 때 주로 사용한다.
func padding(_ length: CGFloat) -> some View
Text("Hello world!")
.padding(16)
// .padding() 사용 시 기본 값이 16이다.
파라미터로 아무것도 전달하지 않는다면 .padding(16)
이 적용된다.
insets를 사용할 일은 많지 않았으며, 주로 사용했던 건 좌,우에 패딩을 주는 경우였는데, 이렇게 특정 edges에만 패딩을 추가하고 싶을 때는 두 개의 파라미터를 가지는 padding(_:_:)
매서드를 사용한다.
padding(_:_:)
Adds an equal padding amount to specific edges of this view.
Parameters
edges
The set of edges to pad for this view. The default is all
length
An amount, given in points, to pad this view on the specified edges. If you set the value to nil
, SwiftUI uses a platform-specific default amount. The default value of this parameter is nil
.
하나 또는 그 이상의 edges에 패딩을 주기 위해 주로 사용한다. Edge.Set
파라미터를 통해 패딩을 적용하고자 하는 edge를 설정할 수 있으며, 여러 edge에 추가하기 위해 OptionSet
의 형태로 파라미터를 사용하기도 한다.
// 왼쪽에만 패딩 20을 준다.
Text("Hello world!")
.padding(.leading, 20)
// 아래, 오른쪽에만 패딩 20을 준다.
// OptionSet을 활용하여 여러 edges들에 패딩을 줄 수 있다.
Text("Hello world!")
.padding([.bottom, .trailing], 20)
Edge.Set
파라미터로 사용하는 Edge.Set
의 경우, 다양한 값이 존재한다. SwiftUI를 처음 다룰 때에 이에 대해 제대로 숙지하지 않고 무작정 사용했었는데, horizontal 패딩을 위해 padding modifier 두 개를 연달아 사용했던 경험이 있다....ㅎ
Edge.Set 종류
static let all: Edge.Set
static let top: Edge.Set
static let bottom: Edge.Set
static let leading: Edge.Set
static let trailing: Edge.Set
static let horizontal: Edge.Set
static let vertical: Edge.Set
주로 좌, 우에만 패딩을 주는 경우가 꽤 있었는데, 이럴 때 OptionSet 사용하지말고 그냥 .horizontal
사용하면 된다.
Text("Hello world!")
.padding([.leading, .trailing], 20)
Text("Hello world!")
.padding(.horizontal, 20)
정리
무작정 따라하며 개발을 하더라도, 반드시 시간을 내서 문서를 읽어보도록 하자^..^