SafeAreaInset
- 디바이스 화면 SafeArea에 콘텐츠 뷰 추가
safeAreaInset
- 디바이스 화면의 가장자리 등 SafeArea에 여백을 추가하여 뷰를 배치할 수 있다.
struct SafeAreaInsetStudy: View {
var body: some View {
NavigationStack {
List(0..<10) { _ in
Rectangle()
.frame(height: 200)
}
.navigationTitle("Safe Area")
.safeAreaInset(edge: .bottom, alignment: .center, spacing: nil) {
Button("test") {
}
.frame(maxWidth: .infinity)
.background(Color.green)
}
}
}
}

navigationTitle
이 존재하는 상황에서 상단에 뷰를 추가할 경우, navigationTitle
영역을 포함한다.
struct SafeAreaInsetStudy: View {
var body: some View {
NavigationStack {
List(0..<10) { _ in
Rectangle()
.frame(height: 200)
}
.navigationTitle("Safe Area")
.safeAreaInset(edge: .top, alignment: .center, spacing: nil) {
Button("test") {
}
.frame(maxWidth: .infinity)
.background(Color.green)
}
}
}
}

- 그러나 추가하는 뷰 하단의 SafeArea를 무시하는 경우,
navigationTitle
영역을 포함하지 않는다.
struct SafeAreaInsetStudy: View {
var body: some View {
NavigationStack {
List(0..<10) { _ in
Rectangle()
.frame(height: 200)
}
.navigationTitle("Safe Area")
.safeAreaInset(edge: .top, alignment: .center, spacing: nil) {
Button("test") {
}
.frame(maxWidth: .infinity)
.background(Color.green.edgesIgnoringSafeArea(.bottom))
}
}
}
}
