How to make two Lists in one View scroll as one page in SwiftUI?

user_4833237 0
Viewed 3185

I'm trying to add two tables with different sizes to one view in SwiftUI. I want both tables be fully expanded and the whole view to scroll as one. For now I only get both tables fixed size and scroll separately.

some View {
    VStack {
        Text("Table foo")
        List(foo { item in Text(item.name) })

        Text("Table bar")
        List(bar { item in Text(item.name) })
    }
}

Tried changing VStack to a ScrollView, it makes things even worse - tables are becoming one liners.

Also tried replacing List() with ForEach() but then I lose features of the List() I actually want.

swiftui-list swiftui
2 Answers

I think you want one List with multiple ForEach's. Optionally, you could make it a grouped List with multiple sections. Adapted for your sample, the following concept has worked well for me on several occasions:

struct SwiftUIView: View {
    var body: some View {
        List {
            Section(header: Text("Table foo"))
            {
                ForEach(foo) { item in Text(item.name) }
            }
            Section(header: Text("Table bar"))
            {
                ForEach(bar) { item in Text(item.name) }
            }
        }
        .listStyle(GroupedListStyle())
    }
}
user_8999180
user_44022550
Related