SwiftUI 列表子视图未显示

Question

我试图嵌入一个包含 Header 视图和列表 header 的视图，并在原始视图中呈现列表，但是当我将其放入parent 查看。我不明白我做错了什么。我尝试将 header 放入列表中，但随后整个视图都消失了。

这是包含列表的视图的代码：

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)
    }
}

...以及 parent 视图的代码：

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())
    }
}

包含列表的视图图像：

parent 视图的图像：

Answer 1

您正在将一个滚动视图 (List) 嵌入到另一个滚动视图 (ScrollView) 中，这总是会有一些固有的困难（并且可能会产生奇怪的 UI/UX 后果滚动）。

因为 CityDetailCategoryView 除了它的 header 之外没有任何固有高度（其余的可以折叠成 ScrollView），所以它折叠为零。

您可以使用 frame 为其设置高度，如这个简化示例所示（如果您删除 frame 调用，它的行为与您的相同）：

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")
        }
    }
}

话虽这么说，我认为您仍然会运行滑稽滚动行为的风险。

我的建议是重新构建您的视图，以便您拥有一个列表或滚动视图来显示所有内容。

SwiftUI 列表子视图未显示

SwiftUI List subview not showing up

xcode

listview

ios

swift

swiftui