如何在 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

你应该使用 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("\([=10=])").padding() }
            }
        }
    }
}

Answer 2

虽然这不适用于 OP，但在线性渐变的颜色变化严格垂直的情况下（即起点是 .top 和终点是 .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 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")
        }
    }
}

如何在 swiftUI 中忽略具有线性渐变背景的安全区域？

How to ignore safe area for a background with a linear gradient in swiftUI?

swift

xcode

swiftui

gradient

xcode11