Hello all,

I'm trying to create a view that contains a List and Grid in the same view - like, for example the Apple Music Library page which has a list at the top and a grid of album images below. I want the whole page to be scrollable.

Is this possible in SwiftUI? Everything I've tried breaks the layout and I can't find anything in my searches - Lists just seem to like to be the only item on the page (except in a ZStack but then only the list scrolls).

Thanks Russell

Combining a List and a Grid in the same scrollable view in SwiftUI can be challenging because Lists tend to dominate the layout. One effective approach is to use a ScrollView with a VStack to contain both elements, ensuring the entire page remains scrollable. Here’s a simple example:

import SwiftUI

struct ContentView: View { var body: some View { ScrollView { VStack(alignment: .leading, spacing: 20) { // List at the top VStack(alignment: .leading) { Text("List Header") .font(.headline) ForEach(0..<5) { index in Text("List item (index)") } } .padding()

            // Grid of album images below
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))], spacing: 20) {
                ForEach(0..<20) { index in
                    Rectangle()
                        .fill(Color.blue)
                        .frame(height: 100)
                        .overlay(Text("Item \(index)"))
                }
            }
            .padding()
        }
    }
}

}

This code uses a ScrollView to ensure the entire content is scrollable, with a VStack inside to organize the List and Grid. You can customize the appearance and spacing as needed. This approach should help you achieve the desired layout without breaking the scroll functionality.

Hope this may help you !

Thank you, Alex.

Really appreciate the detailed explanation and example. Will give it a go first thing tomorrow morning!

Cheers Russell