[SwiftUI] How to have a list in a scrollView?

I am trying to recreate the stock Reminders app in SwiftUI. However, looking at the top 2x2 grid and then the account-based sectioned list of reminder "lists", it seems nearly impossible to replicate as the sectioned list must essentially be a subview of a scrollView with the grid as another subview above it as the grid scrolls alongside the list of "lists". Having the grid as an element in the list works, but has the row separators. Having a scrollView that has the Grid and then a List as children makes the list have a height of 0. Any thoughts?

Replies

This comes close

Code Block struct ContentView: View {
    var body: some View {
            List {
                Section {
                    VStack (spacing: 20) {
                        HStack (spacing: 20) {
                            RoundedRectangle(cornerRadius: 12, style: .continuous)
                                .foregroundColor(Color(.systemRed))
                            RoundedRectangle(cornerRadius: 12, style: .continuous)
                                .foregroundColor(Color(.systemYellow))
                        }
                        .frame(height: 100)
                        HStack (spacing: 20) {
                            RoundedRectangle(cornerRadius: 12, style: .continuous)
                                .foregroundColor(Color(.systemGreen))
                            RoundedRectangle(cornerRadius: 12, style: .continuous)
                                .foregroundColor(Color(.systemBlue))
                        }
                        .frame(height: 100)
                    }
                }
                Section(header: Text("My Lists")) {
                    ForEach(1..<21) { index in
                        Text("\(index)")
                    }
                }
            }
            .listStyle(InsetGroupedListStyle())
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(.dark)
    }
}