SwiftUI 安全区域：释放应用程序设计自由度

2023-11-01 03:13:43

SwiftUI 为 iOS 应用程序开发带来了令人耳目一新的体验，它提供了直观且声明式的语法，使创建用户界面变得轻松。在 SwiftUI 中，SafeArea（安全区域）的概念至关重要，它确保应用程序元素不会被设备上的缺口、状态栏或其他系统元素遮挡。本文将深入探讨 SwiftUI 中的安全区域，了解如何获取 SafeArea 内边距、将视图绘制到安全区域之外，以及修改视图的安全区域。

获取 SwiftUI 中的 SafeAreaInsets

获取 SafeArea 内边距是设计针对特定设备的安全用户界面布局的第一步。SwiftUI 提供了一个名为 SafeArea 的视图修改器，它允许您访问设备的安全区域内边距。以下示例展示了如何在 SwiftUI 视图中获取 SafeArea 内边距：

struct ContentView: View {
    @State private var safeAreaInsets: EdgeInsets = EdgeInsets()

    var body: some View {
        VStack {
            Text("SafeArea Insets:")
            HStack {
                Text("Leading: \(safeAreaInsets.leading)")
                Text("Trailing: \(safeAreaInsets.trailing)")
                Text("Top: \(safeAreaInsets.top)")
                Text("Bottom: \(safeAreaInsets.bottom)")
            }
        }
        .onAppear {
            safeAreaInsets = UIApplication.shared.windows[0].safeAreaInsets
        }
    }
}

在 onAppear 修饰符中，我们检索 safeAreaInsets 并将其存储在状态变量中。这确保了当设备旋转或安全区域发生变化时，内边距会更新。

将视图绘制到 SafeArea 之外

在某些情况下，您可能需要将视图绘制到安全区域之外。例如，您可能想要创建一个延伸到设备边缘的全屏图像。SwiftUI 提供了 ignoreSafeArea 视图修改器，它允许您绕过安全区域限制并绘制到整个屏幕。

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("myImage")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .ignoreSafeArea()
        }
    }
}

使用 ignoreSafeArea 时，需要注意视图可能会被系统元素遮挡。因此，谨慎使用此修改器，并确保它不会对应用程序的用户体验产生负面影响。

修改 SwiftUI 中的 SafeArea

有时，您可能需要修改视图的安全区域。例如，您可能想要创建自定义安全区域，将其应用于特定部分的用户界面。SwiftUI 提供了 safeAreaInset 视图修改器，它允许您在指定边缘添加自定义内边距。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Custom SafeArea:")
            HStack {
                Text("Leading: \(safeAreaInsets.leading)")
                Text("Trailing: \(safeAreaInsets.trailing)")
                Text("Top: \(safeAreaInsets.top)")
                Text("Bottom: \(safeAreaInsets.bottom)")
            }
        }
        .safeAreaInset(edge: .top, content: {
            Color.red.frame(height: 50)
        })
    }
}