Contents

backgroundExtensionEffect(isEnabled:)

Adds the background extension effect to the view. The view will be duplicated into mirrored copies which will be placed around the view on any edge with available safe area. Additionally, a blur effect will be applied on top to blur out the copies.

Declaration

@MainActor @preconcurrency func backgroundExtensionEffect(isEnabled: Bool) -> some View

Parameters

  • isEnabled:

    Should the extension effect be active or not.

Discussion

Use this modifier when you want to create copies outside of the safe area so the view and its copies together can function as backgrounds for other elements on top. The most common use case is to apply this to a view in the detail column of a navigation split view so it can extend under the sidebar or inspector region to provide seamless immersive visuals.

@State private var extendBackground: Bool = true

NavigationSplitView {
    // sidebar content
} detail: {
    ZStack {
        BannerView()
            .backgroundExtensionEffect(isEnabled: extendBackground)
    }
}
.inspector(isPresented: $showInspector) {
    // inspector content
}

Apply this modifier with discretion. This should often be used with only a single instance of background content with consideration of visual clarity and performance.