这一节来知道安全区域，那么安全区域是什么？

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

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

Layout | Apple Developer Documentation
*A consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy…*developer.apple.com

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

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

安全区域在SwiftUI上的使用

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

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

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

安全区域在SwiftUI上的使用

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

比方我只设置top, 作用如下

安全区域在SwiftUI上的使用

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

安全区域在SwiftUI上的使用

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

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

安全区域在SwiftUI上的使用

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

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

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