I would like to create a grid that is similar to a chess layout and labeled from 1 to 100 starting at the bottom left. It should look somewhat like this:
…
5(white) 6(black) 7(white) 8(black)
1(black) 2(white) 3(black) 4(white)
I cannot get the labeling or coloring to display correctly. This is my attempt. How can I adjust it?
import SwiftUI
struct LevelOverviewView: View {
let numberOfLevels = 100
var body: some View {
ScrollView {
LazyVGrid(columns: Array(repeating: GridItem(.fixed(70)), count: 4), content: {
ForEach((1...numberOfLevels).reversed(), id: .self) { i in
ZStack{
Rectangle()
.fill(i % 2 == 0 ? .black : .white)
.aspectRatio(1.0, contentMode: .fit)
Text("(i)")
.foregroundStyle(i % 2 == 1 ? .black : .white)
}
}
})
}
.background(.red)
}
}
#Preview {
LevelOverviewView()
}
You could try this approach reversing the numbers in steps of 4, as shown in the
example code:
struct ContentView: View {
var body: some View {
LevelOverviewView()
}
}
struct GridCell: Identifiable {
let id = UUID()
var value: Int
}
struct LevelOverviewView: View {
@State private var gridCell: [GridCell] = []
let numberOfLevels = 100
let step = 4 // <--- here, adjust as desired
var body: some View {
ScrollView {
LazyVGrid(columns: Array(repeating: GridItem(.fixed(70)), count: step)) {
ForEach(gridCell) { cell in
ZStack {
Rectangle()
.fill(cell.value % 2 == 0 ? .black : .white)
.aspectRatio(1.0, contentMode: .fit)
Text("(cell.value)")
.foregroundStyle(cell.value % 2 == 1 ? .black : .white)
}
}
}
}
.background(.red)
.onAppear {
gridCell = (1...numberOfLevels).map{ GridCell(value: $0) }.reversed()
// --- here
for i in stride(from: 0, to: gridCell.count, by: step) {
let endIndex = min(i + step, gridCell.count)
gridCell[i..<endIndex].reverse()
}
}
}
}