时间戳

首页 > 解决方案 > 使用 ForEach 循环制作多行 Component() ？[SwiftUI]

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

问题描述

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

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

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

可能吗 ？

谢谢

标签： arrayslayoutswiftuiline-breaks

解决方案

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

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 中进行测试，我只是编写代码以了解如何管理它

推荐阅读