Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

With SwiftUI, I know how to set a background with a simple color all over screen. So only background ignore the safe area. But when I want to do this with a linear gradient, I don't know do this.

My view with a simple background :

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

So in this case, the safe area is ignored only for the background.

But how can I do this with this type of background ?

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

I don't know how to place .edgesIgnoringSafeArea(.all)

like image 510
Guillaume Avatar asked Jul 31 '19 12:07

Guillaume


2 Answers

You should use ZStack. Also, note that the LinearGradient is a View itself and there is no need to embed it in background modifier. So:

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() }
            }
        }
    }
}
like image 180
Mojtaba Hosseini Avatar answered Nov 15 '22 07:11

Mojtaba Hosseini


Although this doesn't apply to the OP, in cases where the linear gradient's color changes are strictly vertical (i.e. startPoint is .top and endPoint is .bottom), then as an alternative to Mojtaba's solution, you can add a second (and third) .background using the Colors at the top and bottom of your gradient.

So,

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

Could become,

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

This will work in portrait mode, not sure about landscape though!

like image 23
saskSunDog Avatar answered Nov 15 '22 07:11

saskSunDog