迭代视图网格 SwiftUI

Question

我想获取一个可变长度的数组并返回一个具有 3 列和可变行长度的视图网格。视图应该根据数组值更新它的内容。

以下代码将为每张卡片显示一个 CardPicView，滚动视图中的标题为“A”...“I”。

struct ContentView : View {
    let cards = ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
    var body: some View {
        ScrollView {
            ForEach(cards.identified(by: \.self)) { card in
                    CardPicView(cardTitle: card)
            }
        }
    }
}

我想把这个滚动视图分成 3 列，本质上。

我发现下面的代码可以使用以下代码创建一个合适大小的网格：

struct ContentView : View {
    let cards = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"]
    var body: some View {
        ScrollView{
            ForEach(0..<cards.count/3) { row in // create number of rows
                HStack {
                    ForEach(0..<3) { column in // create 3 columns
                        Text(self.cards[row])
                    }
                }
            }
        }
    }
}

然而，这给了我一个只有 (AAA/BBB/CCC/DDD) 的 3x4 网格

将此更改为：

struct ContentView : View {
    let cards = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"]
    var body: some View {
        ScrollView{
            ForEach(0..<cards.count/3) { row in // create number of rows
                HStack {
                    ForEach(0..<3) { column in // create 3 columns
                        Text(self.cards[column])
                    }
                }
            }
        }
    }
}

给我一个只有 (ABC/ABC/ABC/ABC) 的 3x4 网格。

我不知何故需要使用两个索引迭代行和列，但不确定如何快速执行此操作。

Answer 1

我认为 SwiftUI 中没有任何特定的东西可以阻止这种情况。我认为这就是你想要完成的？

struct ContentView : View {
    let cards = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"]
    var body: some View {
        ScrollView{
            ForEach(0..<cards.count/3) { row in // create number of rows
                HStack {
                    ForEach(0..<3) { column in // create 3 columns
                        Text(self.cards[row * 3 + column])
                    }
                }
            }
        }
    }
}