SwiftUI 制作一个只显示一定数量行的列表

Question

我最近开始使用 SwiftUI，到目前为止它很棒。然而，我发现了一个我似乎无法找到答案的问题。

我正在尝试创建这个设计：

如您所见，这里是一个表格视图（一个列表），其中行内有一个较小的表格视图（一个列表）。使用 IB 时任务非常简单，但是使用 swiftUI 我似乎无法找到一种方法将行数限制为我需要的数量或根据行数手动设置列表高度（请记住这些行的高度也可以变化）。

到目前为止，我的代码只包括创建列表和添加 2 个测试行：

List {
    OrderItemRow()
    OrderItemRow()
}

但正如您所见，SwiftUI 会自动拉伸 List 以填充所有可用空间。效果：

Answer 1

如果您知道行的高度，可以这样实现：

List(self.arrayOfAllItemsInOrder(currentOrder)) { item in
    OrderItemRow(currentOrder: order, item:item)
}
.environment(\.defaultMinListRowHeight, rowHeight)
.frame(height: self.arrayOfAllItemsInOrder.reduce(0) { i, _ in i + rowHeight })

这将根据rowHeight 计算列表的完整大小并限制框架的高度。

请注意，如果您的行大小超出 rowHeight，整个计算将被打乱，您可能会看到一半（或丢失整个）单元格。

Answer 2

我建议使用 ForEach 来显示您的订单并使用嵌套 ForEach 来显示订单中的项目。关键是将提供给每个 ForEach 的数据管理为所需的项目数量，并为 OrderHeaderRow、OrderItemRow 等构建适当的行视图。

struct OrdersView: View {
    var body: some View {
        List {
            Section(header: Text("Current Order")) {
                OrderHeaderRow(order: currentOrder)
                ForEach(self.arrayOfAllItemsInOrder(currentOrder)) { item in
                    OrderItemRow(currentOrder: order, item:item)
                }
                OrderTotalRow(order: order)
                ActionButtonsRow(order:order)
            }
            Section(header: Text("Previous Orders")) {
                ForEach(self.arrayOfAllPreviousOrders) { order in
                    OrderHeaderRow(order: order)
                    ForEach(self.arrayOfAllItemsInOrder(order)) { item in
                        OrderItemRow(order: order, item:item)
                    }
                    OrderTotalRow(order: order)
                    ActionButtonsRow(order:order)
                }
            }
        }
    }
}