SwiftUI中为List元素创建独立分区并显示对应数据表问题

你的问题出在Section内部嵌套了List组件——SwiftUI的Section是List的子容器，内部应该直接放置列表项视图，嵌套的List会被布局系统压缩，导致内容无法显示。

修复步骤 #

1. 先把状态和对应的数据关联起来，避免硬编码block1、block2，方便后续扩展：
   可以用字典或者自定义结构体，比如用字典：

   @State var stateData: [String: [String]] = [
       "CA": ["John", "Emma", "Winny"],
       "MA": ["Supreme", "Jax", "Louis"]
   ]
   

2. 在Section内部用ForEach替代嵌套的List，直接生成对应的数据项：

修改后的完整代码 #

struct ListsView: View {
    // 用字典关联状态和对应的数据
    @State var stateData: [String: [String]] = [
        "CA": ["John", "Emma", "Winny"],
        "MA": ["Supreme", "Jax", "Louis"]
    ]
    
    var body: some View {
        List {
            // 遍历所有状态-数据对
            ForEach(Array(stateData.keys), id: \.self) { state in
                Section(header: Text(state)) {
                    // 遍历当前状态对应的所有数据项
                    ForEach(stateData[state] ?? [], id: \.self) { name in
                        Text(name)
                    }
                }
            }
        }
    }
}

如果不想改数据结构，只是临时适配原代码，也可以给每个状态判断对应的数据：

struct ListsView: View {
    @State var states: [String] = ["CA", "MA"]
    @State var block1: [String] = ["John", "Emma", "Winny"]
    @State var block2: [String] = ["Supreme", "Jax", "Louis"]
    
    var body: some View {
        List(states, id: \.self) { state in
            Section(header: Text(state)) {
                ForEach(state == "CA" ? block1 : block2, id: \.self) { name in
                    Text(name)
                }
            }
        }
    }
}

这样每个Section就能正常显示对应的数据列表了。

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