使用 ForEach 循环制作多行 Component() ？ [SwiftUI]答案

【问题标题】：Make a multilines Component() with ForEach loop ? [SwiftUI]使用 ForEach 循环制作多行 Component() ？ [SwiftUI]
【发布时间】：2020-03-26 21:24:11
【问题描述】：

我有一个循环显示我的所有 MyView() 元素：

HStack() {
    ForEach(datastore.datacard) { data in
        MyView()
    }
}

但我希望屏幕上每行最多有 4 个项目 MyView() 我有一个包含 10 个元素的列表，我不想使用 ScrollView）。我不知道，比如在每 4 个元素处触发一个 Hstack() 吗？

有可能吗？

谢谢

【问题讨论】：

标签： arrays layout swiftui line-breaks

【解决方案1】：

ForEach 有一个初始化器，它采用 Range： https://developer.apple.com/documentation/swiftui/foreach/3364099-init

ForEach(0..<4) { index in
    MyView()
}

如果您需要访问 ForEach 内部 datastore.datacard 中提供的数据，您可以通过索引访问数据：

ForEach(0..<(datastore.datacard.count < 4 ? datastore.datacard.count : 4)) { index in
     MyView(self.datastore.datacard[index])
}

【讨论】：

【解决方案2】：

首先，您需要使用此扩展将数据数组拆分为块：

extension Array {
    func chunked(into size: Int) -> [[Element]] {
        return stride(from: 0, to: count, by: size).map {
            Array(self[$0 ..< Swift.min($0 + size, count)])
        }
    }
}

然后你可以设置数组大小：

let chunksResult = datastore.datacard.chunked(into: 4)

对于 UI 试试这个

VStack {
      ForEach(chunksResult) { rowData in
          HStack {
              ForEach(rowData) { columnData in
                  MyView()
              }
          }
      }
  }

这是示例代码，需要在 Xcode 中进行测试，我只是编写代码以了解如何管理它

【讨论】：

那行不通，因为 Array 不符合 Identifiable