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

Posted 2023-02-24

【中文标题】使用 ForEach 循环制作多行 Component() ？ [SwiftUI]

【英文标题】：Make a multilines Component() with ForEach loop ? [SwiftUI]

【发布时间】：2020-03-26 21:24:11

【问题描述】：

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

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

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

有可能吗？

谢谢

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