How to Create a Full-Width Container (Edge-to-Edge Layout) Above a List View

I’m trying to add a container view above a list view that stretches edge-to-edge across the device.

What’s the recommended approach to achieve this layout with Swift UI?

Example

Hello @danilopeixoto,

One way is to place both views in a VStack, while making sure the top content uses .ignoresSafeArea().

You can see this demonstrated in our sample code Landmarks

If you still need help feel free to provide more information in this thread!

 Travis Trotto - DTS Engineer

Do you mean something like this?

VStack {
    ContainerView()
        .ignoresSafeArea()
    List {}
}

However, with this approach only the List is scrollable. The behavior I’m trying to achieve is similar to the image in the post above. Perhaps something like this?

ScrollView {
    ContainerView()
        .ignoresSafeArea()
    List { }
}

However, this doesn’t work because List is scrollable on its own. However, Im still interested in the look and feel of a List below the container.

How to Create a Full-Width Container (Edge-to-Edge Layout) Above a List View
 
 
Q