使用 ForEach 循环创建多行 Component() ？ [SwiftUI]

Question

I have a loop that display all of my MyView() elements :

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

But I want to have a maximum of 4 item MyView() per line on my screen I have a list of 10 elements and I don't want to use a ScrollView). I don't know, like trigger an Hstack() at each 4 elements ?

Is it possible ?

Thank you

Answer 1

There is a initializer for ForEach taking a Range: https://developer.apple.com/documentation/swiftui/foreach/3364099-init

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

if you need to access the data provided in datastore.datacard inside your ForEach you could access the data via the index:

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

Answer 2

First, you need to split data array into chunks using this extension:

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)])
        }
    }
}

then you can set the array size:

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

For the UI Try this

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

this is the sample code and needs to be test in Xcode, I just write the code to have a clue on how you can manage it