SwiftUI 列表子视图未显示

Question

I'm trying to embed a view that contains a Header view and a List The header and list render in the original view, but the list completely disappears when I put it in the parent view. I don't understand what I'm doing wrong. I tried putting the header in the list, but then the entire view disappears.

Here is the code for the view that contains the list:

import SwiftUI

struct CityDetailCategoryView: View {
    let cityDetailViewModel: CityDetailViewModel
    let titles = ["Category 2", "Category 3", "Category 4", "Category 5", "Category 6", "Category 7"]
    
    var body: some View {
        VStack(alignment: .leading) {
            SectionHeadingView(cityDetailViewModel: CityDetailViewModel, sectionTitle: "Categories")
            List {
                ForEach(titles, id: \.self) { title in
                    Text(title)
                        .font(.title3)
                        .fontWeight(.medium)
                }
            }
        }
    }
}

struct CityDetailCategoryView_Previews: PreviewProvider {
    static var previews: some View {
        CityDetailCategoryView(cityDetailViewModel: CityDetailViewModel())
            .previewLayout(.sizeThatFits)
    }
}

...and the code of the parent view:

import SwiftUI

struct CityDetailView: View {
    @ObservedObject var cityDetailViewModel: CityDetailViewModel
    
    var body: some View {
        NavigationView {
            ScrollView(.vertical, showsIndicators: false, content: {
                VStack(alignment: .leading, spacing: 6, content: {
                    DetailHeaderImageView(cityDetailViewModel: CityDetailViewModel)
                    Group {
                        CityDetailTitleView(cityDetailViewModel: CityDetailViewModel)
                        CityDetailQuickFactsView(cityDetailViewModel: CityDetailViewModel)
                        CityDetailCategoryView(cityDetailViewModel: CityDetailViewModel)
                        CityDetailMiscellaneousView(cityDetailViewModel: CityDetailViewModel)
                        HStack {
                            Spacer()
                            Text("Data provided by ****")
                                .font(.caption2)
                            Spacer()
                        }
                        .padding()
                    }
                    .padding(.horizontal, 24)
                }) 
            }) 
            .edgesIgnoringSafeArea(.top)
            .navigationBarTitle(cityDetailViewModel.cityDetail.name, displayMode: .inline)
            .navigationBarHidden(true)
        } 
    }
}

struct CityDetailView_Previews: PreviewProvider {
    static var previews: some View {
        CityDetailView(cityDetailViewModel: CityDetailViewModel())
    }
}

image of the view containing the list:

image of the parent view:

Answer 1

You're embedding a scrolling view ( List ) inside another scrolling view ( ScrollView ), which is always going to have some inherent difficulties (and potentially strange UI/UX consequences with scrolling).

Because the CityDetailCategoryView doesn't have any inherent height besides its header (the rest can be collapsed into the ScrollView ), it collapses to zero.

You can use frame to set a height for it, as shown in this simplified example (if you remove the frame call, it behaves the same as yours):

var items = [1,2,3,4,5,6]

struct ContentView: View {
    var body: some View {
        ScrollView {
            ForEach(items, id: \.self) { item in
                Text("item")
            }
            List {
                ForEach(items, id: \.self) { item in
                    Text("item")
                }
            }.frame(height: 200) //<-- here
            Text("last item")
        }
    }
}

That being said, I think you'll still run the risk of funny scrolling behavior.

My suggestion would be to rearchitect your views so that you have one list or scrolling view for all of the content.