How do I spread views in my ForEach over 3 rows?

Question

In this code, I have filter tags. They are displayed in a horizontal ScrollView. I want to spread the tags over 3 rows so that more of them are in view without needing to scroll.

How do I do this?

ScrollView(.horizontal, showsIndicators: false) {
                            HStack {

                                ForEach(tagData, id: \.self) { tag in

                                    Button {
                                        print("Tag Tapped...")

                                    }  label: {
                                        BusinessFilterTag(filterSelected: $filterSelected, businessTagData: tag )
                                    }
                                    .background(
                                        Capsule()
                                            .stroke(Color("AshGray"), lineWidth: 2)
                                            .padding(4)
                                            .background(
                                                Capsule()
                                                    .fill(selection == tag.id ? Color("LightBlue").opacity(0.6) : Color.clear)
                                                    .padding(4)
                                            )
                                    )
                                }
                            }
                        }

This answer may help https://stackoverflow.com/questions/62102647/swiftui-hstack-with-wrap-and-dynamic-height/62103264#62103264 — R u c k s a c k, Jul 11 '23 at 21:16
@Rucksack thanks, but I found a simpler solution I posted it as an answer — mbby, Jul 12 '23 at 16:58

score 1 · Answer 1 · answered Jul 12 '23 at 16:58

Here is a simple fix using an extension to Array:

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

Here is the new way to display the views in the ForEach using the extension:

ScrollView(.horizontal, showsIndicators: true) {
                            VStack(alignment: .leading, spacing: 10) {
                                ForEach(0..<3, id: \.self) { rowIndex in
                                    HStack(spacing: 10) {
                                        ForEach(tagData.chunked(into: 3), id: \.self) { row in
                                            if row.count > rowIndex {
                                                let tag = row[rowIndex]
                                                Button {
                                                    // Tag Button Action
                                             
                                                } label: {
                                                    BusinessFilterTag(filterSelected: $filterSelected, businessTagData: tag)
                                                }
                                                .background(
                                                    Capsule()
                                                        .stroke(Color("AshGray"), lineWidth: 2)
                                                        .padding(4)
                                                        .background(
                                                            Capsule()
                                                                .fill(selection == tag.id ? Color("LightBlue").opacity(0.6) : Color.clear)
                                                                .padding(4)
                                                        )
                                                )
                                            } else {
                                                
                                            }
                                        }
                                    }
                                }
                            }
                            .padding(.vertical, 10)
                            .padding(.horizontal, 10)
                        }

How do I spread views in my ForEach over 3 rows?

1 Answers1