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：

var body: some View {
    ZStack {
        Rectangle()
            .foregroundColor(.clear)
            .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)

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

某些颜色可能最终会支持某些天的渐变或视图。

Answer 2

尽管这不适用于OP，但在线性渐变的颜色变化严格垂直的情况下（例如，startPoint为.top和endPoint为.bottom），那么作为Mojtaba解决方案的替代方案，您可以添加第二个（和第三个）.background，使用渐变顶部和底部的颜色。

所以

sha256

有可能成为

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

这可以在人像模式下使用，尽管不确定风景！

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中忽略具有线性渐变的背景的安全区域？

3 个答案: