Итерация сетки просмотров 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])
                    }
                }
            }
        }
    }
}

Однако, это дает мне сетку 3х4 с просто (AAA / BBB / CCC / DDD)

Изменение этого на:

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

Дает мне сетку 3х4 с просто (ABC / ABC / ABC / ABC).

Мне как-то нужно перебирать строки и столбцы, используя два индекса, но не уверен, как это сделать в swift.

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