When building a user interface with SwiftUI, we need to consider the safe area of screen devices, and the elements of the user interface are restricted below the notch.

Today I will show you how to make UI elements breakthrough this safe area and fill the entire screen.

Knowledge points:

• Set the background color of the current view to red, we can see that the red color is within the safe area.

struct ContentView: View {
    var body: some View {
        Color(.red)
    }
}

Visual effects:

• Next, we set the current Color to ignore the restrictions of the safe area in all four directions of up, down, left, and right.

• ignoresSafeArea is not only working for Color, it also works for other views in SwiftUI.

struct ContentView: View {
    var body: some View {
        Color(.red)
            .ignoresSafeArea(.all)
    }
}

Visual effects:

ignoresSafeArea has an alternative initializer, it allows us to specify the edges we want to ignore.

For example, setting the .bottom value as the second argument, only the bottom edge is ignored. The original behavior is maintained for the rest.

struct ContentView: View {
    var body: some View {
        Color(.red)
            .ignoresSafeArea(.all, edges: .bottom)
    }
}

Visual effects:

Follow me on:

(Foks) Hui Wang's LinkedIn