SwiftUI DataStructure for ForEach.. (how to delete) - swiftui

Question

I'm working on an app which show images when tapping buttons.
I have a 4 buttons, and Each buttons has a action that add a image.
The problem I have is that when I remove by ontapGesture, The deleting order is not my want.
Ex) button 1 -> button 2 -> button 3 -> button 4 : Now I can see 4 images in vstack, plus, minus, multiply, divide.
But If I tap button 1 now, the plus image still there.
I think the problem arises because of array. What dataStructure should I use instead?
`
import SwiftUI
struct ContentView: View {
#State var array: [Int] = []
let systemDictionary: [Int : Image] = [
0 : Image(systemName: "plus.circle"),
1 : Image(systemName: "minus.circle"),
2 : Image(systemName: "multiply.circle"),
3 : Image(systemName: "divide.circle")
]
var body: some View {
VStack {
HStack {
Button {
array.append(0)
} label: {
Text("Button 0")
}
Button {
array.append(1)
} label: {
Text("Button 1")
}
Button {
array.append(2)
} label: {
Text("Button 2")
}
Button {
array.append(3)
} label: {
Text("Button 3")
}
}
ForEach(array.indices, id: \.self) { index in
systemDictionary[index]
.font(.system(size: 30))
.padding()
.onTapGesture {
array.remove(at: index)
}
}
}
}
}
`
I found out when I tap button 1 again, it delete the data in array[0].
But there is still array[0], because array always has index.
I understand! but I can not come up with data structure for images.

Answer 1

Using your current setup, you could try this approach, using the content of the array array[index] for the index into systemDictionary, and to limit the set of images to 4 only, use if !array.contains(0) { array.append(0) } as shown in the code:
struct ContentView: View {
#State var array: [Int] = []
let systemDictionary: [Int : Image] = [
0 : Image(systemName: "plus.circle"),
1 : Image(systemName: "minus.circle"),
2 : Image(systemName: "multiply.circle"),
3 : Image(systemName: "divide.circle")
]
var body: some View {
VStack {
HStack {
Button {
if !array.contains(0) { array.append(0) } // <-- here
} label: {
Text("Button 0")
}
Button {
if !array.contains(1) { array.append(1) }
} label: {
Text("Button 1")
}
Button {
if !array.contains(2) { array.append(2) }
} label: {
Text("Button 2")
}
Button {
if !array.contains(3) { array.append(3) }
} label: {
Text("Button 3")
}
}
ForEach(array.indices, id: \.self) { index in
systemDictionary[array[index]] // <-- here
.font(.system(size: 30))
.padding()
.onTapGesture {
array.remove(at: index)
}
}
}
}
}
EDIT-1: using a specific structure for the images:
struct Picture: Identifiable {
let id = UUID()
var image: Image
var label: String
var isVisible: Bool = false
}
struct ContentView: View {
#State var pictures: [Picture] = [
Picture(image: Image(systemName: "plus.circle"), label: "Button 0"),
Picture(image: Image(systemName: "minus.circle"), label: "Button 1"),
Picture(image: Image(systemName: "multiply.circle"), label: "Button 2"),
Picture(image: Image(systemName: "divide.circle"), label: "Button 3")
]
var body: some View {
VStack {
HStack {
ForEach($pictures) { $picture in
Button {
picture.isVisible = true
} label: {
Text(picture.label)
}
}
}
ForEach($pictures) { $picture in
if picture.isVisible {
picture.image
.font(.system(size: 30))
.padding()
.onTapGesture {
picture.isVisible = false
}
}
}
}
}
}