Placing content with safeAreaInset

A fixed button at the bottom of a screen can cover the final items in the content. Rather than simply overlaying another view, safeAreaInset adjusts the safe area available to the surrounding content.

safeAreaInset

Use this modifier to place a view along an edge and reserve space for it.

struct SafeAreaInsetStudy: View {
    var body: some View {
        NavigationStack {
            List(0..<10) { _ in
                Rectangle()
                    .frame(height: 200)
            }
            .navigationTitle("Safe Area")
            // Add a view at the bottom safe-area edge
            .safeAreaInset(edge: .bottom, alignment: .center, spacing: nil) {
                Button("test") {
                    // test button code
                }
                .frame(maxWidth: .infinity)
                .background(Color.green)
            }
        }
    }
}

When adding a top inset inside a navigation container, the navigation-title area affects where the added view and its background appear.

struct SafeAreaInsetStudy: View {
    var body: some View {
        NavigationStack {
            List(0..<10) { _ in
                Rectangle()
                    .frame(height: 200)
            }
            .navigationTitle("Safe Area")
            // Add a view at the top safe-area edge
            .safeAreaInset(edge: .top, alignment: .center, spacing: nil) {
                Button("test") {
                    
                }
                .frame(maxWidth: .infinity)
                .background(Color.green)
            }
        }
    }
}

Changing which safe-area edges the inserted view's background ignores changes how that background extends around the navigation area, as shown below.

struct SafeAreaInsetStudy: View {
    var body: some View {
        NavigationStack {
            List(0..<10) { _ in
                Rectangle()
                    .frame(height: 200)
            }
            .navigationTitle("Safe Area")
            .safeAreaInset(edge: .top, alignment: .center, spacing: nil) {
                Button("test") {
                    // test button code
                }
                .frame(maxWidth: .infinity)
                // Let the inserted background ignore the bottom safe area
                .background(Color.green.edgesIgnoringSafeArea(.bottom))
            }
        }
    }
}