CODEWITHSUNDEEP
swiftswiftui
Byto H
Byto H

Reputation: 73

How to make edgesIgnoringSafeArea in swiftUI work?

The following code makes a view where a rectangle is at the bottom of the view. I put .edgesIgnoringSafeArea(.bottom) so the rectangle goes all the way down, but it doesn't work. I'm simulating this on an iPhone 11 and always leaves a blank space below.

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                List {
                    Text("Hello, World!")
                }
                
                Spacer()
                
                Rectangle()
                    .frame(height: 150)
                    .edgesIgnoringSafeArea(.bottom)
            }
        }
    }
}

enter image description here

Upvotes: 1

Views: 1341

Answers (2)

Giannina
Giannina

Reputation: 1

.edgesIgnoringSafeArea is deprecated, you can use .ignoresSafeArea instead:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color(.systemTeal)
                .ignoresSafeArea(.all)
            Text("I Am Rich")
                .font(.system(size: 40))
                .fontWeight(.bold)
                .foregroundColor(Color.white)
        }
    }
        
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Upvotes: 0

Sweeper
Sweeper

Reputation: 272725

The rectangle is inside a VStack, and the VStack doesn't ignore the safe area. Even if the rectangle ignores the safe area, it can't extend beyond its parent to fill the whole screen.

You should put edgesIgnoringSafeArea after the VStack, and the rectangle will naturally fill the VStack, hence filling the whole screen.

var body: some View {
    NavigationView {
        VStack {
            List {
                Text("Hello, World!")
            }
            
            Spacer()
            
            Rectangle()
                .frame(height: 150)
        }
        .edgesIgnoringSafeArea(.bottom)
    }
}

Upvotes: 3

Related Questions