List View within a Scrollview

Question

Created 1w

Replies 2

Boosts 0

Participants 2

The bane of my existence has been designing interfaces where the whole view needs to scroll, but a portion is a List and the other portion is static.

I run into this problem time and again so I was hoping someone has a good solution because we all know that embedding a List view inside ScrollView is a no-go within SwiftUI. It simply doesn't work.

So what is a best practice when you need the whole screen to scroll, but a portion is a List? Use a navigation stack instead of a ScrollView? What if it's a child view of a navigation stack already?

Screenshot 2025-07-10 at 12.59.13 PM.jpg

Answered by darkpaw in 848479022

Not everything in a List has to be the same thing.

In one of my apps I have a List that has a HeaderView(), then a ToolbarView() then a set of EventRow() views, which looks pretty similar to your wireframe.

Something like this:

VStack {
    List {
        HeaderView()
        ToolbarView()
        ForEach(events.indices, id: \.self) { index in
            EventRow(events[index])
        }
    }
}

Everything scrolls vertically within.

Boost

Answer 1

darkpaw OP

1w

Accepted Answer

Not everything in a List has to be the same thing.

In one of my apps I have a List that has a HeaderView(), then a ToolbarView() then a set of EventRow() views, which looks pretty similar to your wireframe.

Something like this:

VStack {
    List {
        HeaderView()
        ToolbarView()
        ForEach(events.indices, id: \.self) { index in
            EventRow(events[index])
        }
    }
}

Everything scrolls vertically within.

0

Answer 2

itswilder OP

1w

That worked! Not sure what I was doing wrong.

List {
            VStack (alignment: .leading, spacing: 24) {
                HeaderView()
                
                Picker("Filter", selection: $selectedFilter) {
                    Text("One").tag("One")
                    Text("Two").tag("Two")
                }
                .pickerStyle(.segmented)
            }
            .listRowSeparator(.hidden)
            
            if selectedFilter == "One" {
                ForEach(0..<10) { index in
                    NavigationLink(destination: DetailView()) {
                        RowView()
                    }
                }
            }
        }
        .listStyle(.plain)

1