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

Posted 2023-02-24

【中文标题】SwiftUI 制作一个只显示一定数量行的列表

【英文标题】：SwiftUI Make a list that shows only a certain amount of rows

【发布时间】：2019-12-16 18:40:54

【问题描述】：

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

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

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

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

List 
    OrderItemRow()
    OrderItemRow()

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

【问题讨论】：

对于这个 UI 设计，我不会选择列表，而是选择 ScrollView of OrderView's

你做了什么来最终解决它？我的每一行都有一个导航链接，所以想知道哪一个可以轻松工作。

【参考方案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，整个计算将被打乱，您可能会看到一半（或丢失整个）单元格。

【参考方案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)
                
            
        
    

【讨论】：

问题是，如果没有为该列表设置高度的机制，它会自动填满整个屏幕，弄乱设计。正如您在我的代码中看到的那样，我只在这个列表中填充了 2 行。有没有办法限制行？还是手动设置高度？

看起来你可能试图强制 SwiftUI 列表做一些它不打算做的事情。不要将您的订单页眉和订单页脚视图放在列表之外，只需将它们放在列表中即可。仅供参考，列表中的行不必都是相同类型的视图。我将编辑我的答案以显示一些伪代码来演示我在说什么。