SafeArea是指不与视图控制器提供的导航栏、选项卡栏、工具栏或其他视图重叠的内容空间。
在UIKit中，开发人员需要使用safeAreaInsets或safeAreaLayoutGuide来确保视图被放置在界面的可见部分。
SwiftUI彻底简化了上述过程，除非开发者明确要求视图突破安全区域的限制，否则SwiftUI将尽力确保开发者创建的视图布局在安全区域内。SwiftUI还为开发者提供了一些控制安全区域的方法和工具。
Safe area
安全区域帮助我们将视线保持在屏幕可见部分之内。例如，我们可以使用安全区域轻松地将视图放置在导航条和home指示器之间。
默认情况下，SwiftUI只在安全区域内放置视图，比如下面这段代码。
struct SafeAreaDemo: View {
var body: some View {
NavigationView {
ZStack {
LinearGradient(
colors: [.red, .yellow],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
}
.navigationTitle("Hello World")
}
}
}
ignoresSafeArea修饰符
我们可以通过ignoresSafeArea修饰符改变系统这一行为。
struct SafeAreaDemo: View {
var body: some View {
NavigationView {
ZStack {
LinearGradient(
colors: [.red, .yellow],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
}
.ignoresSafeArea()
.navigationTitle("Hello World")
}
}
}
ignoresSafeArea视图修饰符通过忽略安全区域来扩展视图并填充空间。ignoresSafeArea视图修饰符有两个参数，允许我们设置被忽略的安全区域的方向和区域。
/// - Parameters:
/// - regions: The regions to expand the view's safe area into. The
/// modifier expands into all safe area region types by default.
/// - edges: The set of edges to expand. Any edges that you
/// don't include in this set remain unchanged. The set includes all
/// edges by default.
///
/// - Returns: A view with an expanded safe area.
@inlinable public func ignoresSafeArea(_ regions: SafeAreaRegions = .all, edges: Edge.Set = .all) -> some View
regions参数允许我们设置被忽略的安全区域类型。SafeAreaRegions的可选类型主要有下面三种：
// 所有类型
static let all: SafeAreaRegions
// 在用户界面内由设备和容器定义的安全区域，包括顶部和底部条等元素。
static let container: SafeAreaRegions
// 安全区域匹配当前显示在视图内容上的任何软件键盘的范围。
static let keyboard: SafeAreaRegions
edges参数允许我们忽略一个方向或一组方向上的安全区域。例如，它可以是top, leading, bottom, trailing, horizontal, vertical, all或前面选项的任意组合。
safeAreaPadding修饰符
SwiftUI提供的safeAreaPadding修饰符允许我们将安全区的一个边或者多个边设置指定的边距，safeAreaPadding修饰符只在iOS 17或者tvOS 17及以后可以使用。
struct SafeAreaDemo: View {
var body: some View {
NavigationView {
ZStack {
LinearGradient(
colors: [.red, .yellow],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
}
.safeAreaPadding(.all, 100) // 安全区四边缩进100.
.navigationTitle("Hello World")
}
}
}
safeAreaInset修饰符
safeAreaInset视图修饰符是管理视图安全区域的另一种方法。safeAreaInset视图修饰符允许通过在视图的原始安全区域内放置另一个视图来移动或改变视图的安全区域。
func safeAreaInset<V>(
edge: VerticalEdge,
alignment: HorizontalAlignment = .center,
spacing: CGFloat? = nil,
@ViewBuilder content: () -> V
) -> some View where V : View
struct SafeAreaDemo: View {
var body: some View {
NavigationView {
ZStack {
LinearGradient(
colors: [.red, .yellow],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
}
.navigationTitle("Hello World")
.safeAreaInset(edge: .bottom, alignment: .center, spacing: 0) {
Text("Tap")
.frame(width: 50)
.background(Color.red)
}
.safeAreaInset(edge: .top, alignment: .center, spacing: 0) {
Text("Tap")
.frame(maxWidth: .infinity)
.background(Color.blue)
}
}
}
}
safeAreaInset修饰符有一堆参数:
edge: 决定视图要插在垂直边缘的哪个边上，高度不够的时候会根据内容视图的高度决定。alignment：决定视图在水平方向的位置。spacing：两个视图之间放置的额外距离，或nil以使用默认的间距量。调整视图垂直方向的距离。content：提供一个视图。
content被锚定到父视图中指定的垂直边缘，使其水平轴与指定的alignment对齐。安全区高度不够的时候会根据content视图的高度决定。
写在最后
本篇文章主要了解了如何在SwiftUI中管理安全区域。通常，我们不需要管它，因为SwiftUI会自动处理它。但是我们也可以使用安全区域视图修饰器自定义内容以及一些外观等等。