ios – Can ScrollViews and NavigationStacks work collectively in SwiftUI?

I’ve began to develop on SwiftUI very lately (therefore the easy query), in order an train to work with layouts, I am making an attempt to recreate Apple’s personal Music app. The principle challenge I am going through is NavigationStack and lack of sources about it contemplating how new it’s.

I’ve written the next code to copy the Library tab:

NavigationStack{
    
    Listing(menuCategories) {
        menuCategory in NavigationLink(worth: menuCategory
        ){
            Label{
                Textual content(menuCategory.title)
                    .font(.title2)
            } icon:{ Picture(systemName: menuCategory.imageName).foregroundStyle(.purple)
            }
        }
        .padding(.horizontal, -20)
        
    }.navigationDestination(for: MenuCategory.self) {
        menuCategory in
        Textual content(menuCategory.title)
    }
    
    
    ScrollView(.vertical, showsIndicators: true){
        
        VStack(alignment: .main){
            
            Textual content("Lately Added")
                .font(.headline)
                .padding(.horizontal, 20.0)
            
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 130), spacing: 20)]
            ){
                ForEach(recentAlbums, id: .self) {
                    
                    merchandise in
                    VStack(alignment: .main){
                        ZStack{
                            Colour(merchandise.shade)
                            Textual content(merchandise.title)
                        }
                        
                        .cornerRadius(10)
                        .body(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                        .aspectRatio(1.0, contentMode: .match)
                        
                        Textual content(merchandise.title)
                        Textual content(merchandise.artist)
                            .foregroundStyle(Colour(.grey))
                    }
                    .padding(.backside, 10.0)
                    .font(.physique)
                    .lineLimit(1)
                }
            }
            .padding(.horizontal, 20.0)
            
        }
        .navigationTitle("Library")
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Button("Edit") {
                    self.display = 0;
                }
            }
        }
    }
}
.scrollContentBackground(.hidden)
.tabItem {
    Picture(systemName: "play.sq..stack")
    Textual content("Library")
}

This is a preview of the way it’s wanting:

The difficulty is, on each the Preview and the Simulator, the highest Listing (Artists, Albums, and many others) and the underside Grid (Lately Added albums) have separate scrolling, so the entire web page cannot be scrolled down, you scroll on both of the areas, see the underside space of the next screenshot for instance:

I’ve tried to maneuver the highest Listing into the ScrollView, however the entire Listing disappears and solely the Grid is proven on display. I’ve tried to maneuver the completely different components round however have not discovered a mix that works but… Any assist can be enormously appreciated.

Thanks!