如何在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，但在线性渐变的颜色变化严格垂直的情况下（即startPoint是.top，endPoint是.bottom），那么作为Mojtaba解决方案的替代方案，您可以添加第二个（和第三个） ) .background 使用渐变顶部和底部的颜色。

所以，

.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. 另外，请注意LinearGradientis aView本身，无需将其嵌入到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() }
            }
        }
    }
}