SwiftUI中SafeArea的管理与使用（ignoresSafeArea, safeAreaPadding, safeAreaInset）

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)}}}
}