如何在Swiftui中忽略具有线性梯度的背景的安全区域

Question

使用swiftui，我知道如何在屏幕上设置带有简单颜色的背景。因此，只有背景忽略安全区域。但是，当我想用线性梯度执行此操作时，我不知道这样做。

我的视图简单背景：

import SwiftUI
struct Settings : View {
  var body: some View {
    ScrollView {
        VStack {
          Text("Boussole")
            .color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 1.0))
            .multilineTextAlignment(.leading)
            .font(.system(size: 28))
            .padding(.top, 15)
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
          Toggle(isOn: .constant(false)) {
            Text("Afficher le vrai nord")
              .font(.system(size: 20))
              .color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 1.0))
          }
          .padding(.top, 10)
          Toggle(isOn: .constant(true)) {
            Text("Activer la vibration")
              .font(.system(size: 20))
              .color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 1.0))
          }
          .padding(.top, 10)
          .padding(.bottom, 20)
          Divider()
        }
      .padding(.leading, 25)
      .padding(.trailing, 25)
    }
    .background(Color.gray.edgesIgnoringSafeArea(.all))
  }
}

因此，在这种情况下，仅在背景下忽略了安全区域。

但是我该如何使用这种背景？

.background(LinearGradient(gradient: Gradient(colors: [Color(red: 189/255, green: 195/255, blue: 199/255, opacity: 1.0), .white]), startPoint: .topTrailing, endPoint: .bottomLeading), cornerRadius: 0)

我不知道如何放置.edgesIgnoringSafeArea(.all)

Answer 1

尽管这不适用于OP，但如果线性梯度的颜色更改严格垂直(即开始点为.top和endpoint是.bottom(，则作为替代方案Mojtaba的解决方案，您可以使用渐变顶部和底部的颜色添加第二个(和第三(。背景。

so，

.background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .top, endPoint: .bottom), cornerRadius: 0)

可能会变成

.background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .top, endPoint: .bottom), cornerRadius: 0)
.background(Color(.red).edgesIgnoringSafeArea(.top))
.background(Color(.white).edgesIgnoringSafeArea(.bottom))

这将在肖像模式下起作用，但是不确定景观！

Answer 2

您应该使用ZStack。另外，请注意，LinearGradient是View本身，无需将其嵌入background修饰符中。所以：

var body: some View {
    ZStack {
        LinearGradient(gradient: Gradient(colors: [.red, .orange]), startPoint: .topTrailing, endPoint: .bottomLeading)
            .edgesIgnoringSafeArea(.all)
        ScrollView {
            VStack {
                ForEach((1...100), id:.self ) { Text("($0)").padding() }
            }
        }
    }
}

Answer 3

这应该修复iPhone X，XS，11等的底部跟踪

struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [.black,.blue]), startPoint: .top, endPoint: .bottom).edgesIgnoringSafeArea(.all)
            Text("The only label")
        }
    }
}