SafeArea in SwiftUI

这一节来认识安全区域，那么安全区域是什么？

SafeArea表示屏幕上的安全区域，这是在不受视觉遮挡或不良用户体验的情况下，用于放置内容的区域。安全区域通常涉及到设备的边缘，例如屏幕顶部的状态栏区域、底部的Home指示器或设备的刘海

以下是苹果给出的SafeArea，各个屏幕的指导都有。

Layout | Apple Developer Documentation

当我们在使用苹果的组件时，它会默认帮我们留好安全区域，以防我们把布局放在了非安全区域

下图就是一个例子，使用 VStack，它会自动的把内部的视图放在安全区域内部。防止带来不好的体验

struct SafeAreaSample: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.red)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

但是有时，我们需要全屏去布局一个背景色。有的时候的布局就超出了安全区域，那么我们改如何去做？

这个时候我们的主角就要上场了，ignoresSafeArea , ignoresSafeArea 可以设置超出安全区域的方向，他是一个Edge.Set 枚举类型

默认情况下它会忽略上下左右都超出安全区域，你也可以设置某一边。

比如我只设置top, 效果如下

以上代码是，使用Blue颜色来作为底背景，在底背景上面填充来一个矩形来作为内容视图

ZStack {
            
            Rectangle()
                .fill(
                    LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .topLeading, endPoint: .bottomTrailing)
                )
                .ignoresSafeArea()
            
            Button {
                
            } label: {
                Text("点我")
                    .foregroundColor(Color.black)
                    .padding()
                    .padding(.horizontal, 20)
                    .background(Color.white)
                    .cornerRadius(10)
                    .shadow(radius: 10)
            }
        }

使用渐变色作为背景，然后在内容区域填充内容

以上是使用图形的背景色来作整个区域的背景填充

struct SafeAreaSample: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.blue)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(
                    Color.red
                        .edgesIgnoringSafeArea(.all)
                )
        }
    }
}

安全区域就这么多，喜欢就点个赞吧！