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

Posted 2023-02-24

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

【英文标题】：How to ignore safe area for a background with a linear gradient in swiftUI?

【发布时间】：2019-07-31 12:38:39

【问题描述】：

使用 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)

【参考方案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("\($0)").padding() 
            
        
    

【参考方案2】：

虽然这不适用于 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))

这将在纵向模式下工作，但不确定横向模式！

【参考方案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")