SwiftUI中Firebase数据列表：替换List为VStack/ScrollView实现自定义样式

我正尝试为Firebase数据创建自定义样式的列表，但目前仅能通过List视图实现，想改用VStack或ScrollView实现，是否可行？我已尝试将代码中的List替换为VStack/ScrollView，代码如下：

var body: some View {
    NavigationView {
        List(dataManager.lessons, id: \.id) { lesson in // 我尝试把"List"改成"VStack"和"ScrollView"
            let core = lesson.core.components(separatedBy: ",")
            let coreV = Int(core[0]) ?? 0
            let coreW = Int(core[1]) ?? 0
            let coreS = Int(core[2]) ?? 0
            NavigationLink(destination: ScrollView {
                HomeWorkobjectView(core: coreV, lesson: lesson.vocab, type: "vocab")
                HomeWorkobjectView(core: coreW, lesson: lesson.work, type: "work")
                HomeWorkobjectView(core: coreS, lesson: lesson.submissions, type: "work to hand in")
            }.toolbar {
                Text(lesson.name).font(.title3)
            }) {
                    Text(lesson.name)
                    .padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
                    .cornerRadius(buttonCorners)
                    .padding(/*@START_MENU_TOKEN@*/.horizontal/*@END_MENU_TOKEN@*/)
            }
        }
        .navigationTitle("homework")
    }
}

当然可以用VStack+ScrollView替代List来实现自定义列表，只是需要做几个关键调整：

• 用ScrollView包裹VStack：VStack本身没有滚动能力，直接替换List会导致内容超出屏幕后无法滚动，必须把VStack嵌套在ScrollView内部。
• 显式使用ForEach遍历数据：List支持直接遍历数组的语法糖，换成VStack后需要用ForEach来循环生成每个列表项。
• 自定义样式替代List默认效果：List自带的行分隔线、点击高亮等样式会消失，如果需要类似效果，得手动添加（比如用Divider分隔行，给NavigationLink的label加背景色实现点击反馈）。

修改后的代码示例：

var body: some View {
    NavigationView {
        ScrollView {
            VStack(spacing: 8) { // 自定义行间距
                ForEach(dataManager.lessons, id: \.id) { lesson in
                    let core = lesson.core.components(separatedBy: ",")
                    let coreV = Int(core[0]) ?? 0
                    let coreW = Int(core[1]) ?? 0
                    let coreS = Int(core[2]) ?? 0
                    
                    NavigationLink(destination: ScrollView {
                        HomeWorkobjectView(core: coreV, lesson: lesson.vocab, type: "vocab")
                        HomeWorkobjectView(core: coreW, lesson: lesson.work, type: "work")
                        HomeWorkobjectView(core: coreS, lesson: lesson.submissions, type: "work to hand in")
                    }.toolbar {
                        Text(lesson.name).font(.title3)
                    }) {
                        Text(lesson.name)
                            .padding(.all)
                            .background(Color(UIColor.systemBackground)) // 自定义背景
                            .cornerRadius(buttonCorners)
                            .padding(.horizontal)
                    }
                    .buttonStyle(.plain) // 去掉NavigationLink默认高亮，方便自定义样式
                    
                    Divider() // 添加行分隔线，模拟List默认效果
                }
            }
        }
        .navigationTitle("homework")
    }
}

说明：

• ScrollView包裹VStack保证内容可滚动，spacing属性可以自由控制行之间的距离。
• Divider用来模拟List的行分隔线，不需要的话可以直接删掉。
• .buttonStyle(.plain)取消NavigationLink默认的点击高亮，避免干扰自定义的背景样式。

内容的提问来源于stack exchange，提问作者user18693824