The following code creates a table-type structure, and the goal is for a particular, tapped box (not all the boxes) in the grid to change from an empty rectangle with a red border to a rectangle containing text with a white/black border. I could swear I got this to work before I slimmed down the code and moved the ZStack{}s into a separate struct. Then I tried to reverse engineer the original code because I forgot to commit it. But maybe I was hallucinating. 😵💫 Right now, tapping a box correctly displays text in only that box, but all the borders are changing from red to white/black.
(Item
is a struct, with an embedded struct Box
; subarray1
and subarray2
are each an Array<Box>
inside Item
.)
Was I hallucinating? Or am I missing/misplacing a key word somewhere? What appears below should be identical or nearly identical to the original code I had. It has to be somewhere in the commented lines, as those are what had to be adjusted when I moved the ZStack to its own struct.
struct LowerPane: View {
@State var currentItem: Item
@State private var borderColor = Color.red // changed
var body: some View {
GeometryReader { ruler in
ScrollView {
HStack(spacing: 0) {
VStack(spacing: 0) {
ForEach($currentItem.subarray1) { $box in
ZStack {
Rectangle()
.fill(.primary).colorInvert()
.frame(width: ruler.size.width * 0.5, height: 60, alignment: .center)
.border(borderColor)
.onTapGesture(perform: {
box.selected = true // changed
borderColor = Color.primary // changed
})
if box.selected { // changed
MyText(str: box.statement) // changed
}
}
}
}
VStack(spacing: 0) {
ForEach($currentItem.subarray2) { $step in
ZStack {
Rectangle()
.fill(.primary).colorInvert()
.frame(width: ruler.size.width * 0.5, height: 60, alignment: .center)
.border(borderColor)
.onTapGesture(perform: {
box.selected = true // changed
borderColor = Color.primary // changed
})
if box.selected { // changed
MyText(str: box.statement) // changed
}
}
}
}
}
}
}
}
}