I have a list and a an image I want to use with .backgroundExtensionEffect() what is the correct way, put it in the list or use a stack?

Asked on 2025-08-20

1 search

To use the .backgroundExtensionEffect() correctly, you should consider the layout and hierarchy of your views. Based on the context provided, it is recommended to use a stack rather than placing the image directly in the list. This is because the background extension effect is designed to extend the appearance of an image or content view beyond the safe area, creating a seamless visual effect.

Here are some key points to consider:

  1. Hierarchy: The image view should be assigned to the content view property of the background extension view. This extension view should be added to your view hierarchy, and any additional details or elements should be added as siblings, not as subviews of the extension view. This ensures that the effect is applied correctly without unwanted visual distortion.

  2. Layout: Using a stack (such as an HStack or VStack in SwiftUI) allows you to organize your views in a way that maintains the intended layout while applying the background extension effect. This approach provides flexibility in positioning and layering your views.

  3. Purpose: The background extension effect is particularly useful for hero images, tinted backgrounds, or any surface meant to feel expansive. Ensure that text and controls are layered above the effect to maintain clarity and avoid distortion.

For more detailed guidance, you can refer to the session Build a UIKit app with the new design (05:09) where the use of background extension effects is discussed.