list - 带有部分的 SwiftUI 动态列表未正确布局

Question

我正在尝试创建一个分组为多个部分的简单动态列表。 (SwiftUI iOS13 Xcode11 beta 2)

一个简单的静态示例是:

struct StaticListView : View {
    var body: some View {
        List {
            Section(header: Text("Numbers"), footer: Text("...footer...")) {
                Text("1")
                Text("2")
                Text("3")
            }
            Section(header: Text("Letters"), footer: Text("...footer...")) {
                Text("a")
                Text("b")
                Text("c")
            }
        }
    }
}

这按预期显示了一个带有部分页眉和页脚的漂亮列表

但是当我尝试从这样的动态列表中执行此操作时:

struct TestData: Identifiable {
    var id = UUID()
    var title: String
    var items: [String]
}

struct ListView : View {
    let mygroups = [
        TestData(title: "Numbers", items: ["1","2","3"]),
        TestData(title: "Letters", items: ["A","B","C"]),
        TestData(title: "Symbols", items: ["€","%","&"])
    ]
    var body: some View {
        List (mygroups) { gr in
            Section(header: Text(gr.title),
                    footer: Text("...footer...") ) {
                ForEach(gr.items.identified(by: \.self)) { item in
                    Text(item)
                }
            }
        }
    }
}

结果是一个只有 3 行的列表。部分标题、所有内容单元格和页脚都水平组合成一行。

我错过了什么？

Answer 1

捐赠 List一组项目似乎使它错误地对待 Section作为单一 View 。

您可能应该为此提交雷达，但与此同时，这将为您提供您正在寻找的行为:

struct ListView : View {
    let mygroups = [
        TestData(title: "Numbers", items: ["1","2","3"]),
        TestData(title: "Letters", items: ["A","B","C"]),
        TestData(title: "Symbols", items: ["€","%","&"])
    ]

    var body: some View {
        List {
            ForEach(mygroups) { gr in
                Section(header: Text(gr.title),
                        footer: Text("...footer...") ) {
                            ForEach(gr.items.identified(by: \.self)) { item in
                                Text(item)
                            }
                }
            }
        }
    }
}