Custom UI Elements not updating in LazyVGrid - swiftui

Question

I have created a custom element I am calling Slide. I have a LazyVGrid that is displaying my Slide elements. My issue is that when I update the data array that my grid is using, the Slide elements are not updating.
Scenario:
User clicks on the options button on a Slide and changes the Slide color, I am then updating the data array but the Slide element doesn't update despite the data being correct (I have verified this by adding Text(slide.color) into the LazyVGrid which displays the newly set color as expected)
My Suspicions:
I am assuming it doesn't update because I have something wrong in the Slide struct, I am quite new to SwiftUI so I am learning as I go. I must also mention that this loads and displays correctly when I first display the view, the only issue is that it doesn't update when I update the SlideStructure.
Here is the Code:
struct ShowSongFile : View {
#EnvironmentObject var SlideStructure : SlidesModel
#State var selectedSlide : SplaySlide? = nil
var columns = [GridItem(.adaptive(minimum: 320))]
var body: some View {
ScrollView {
LazyVGrid(columns: columns, alignment: .trailing, spacing: 20) {
ForEach(SlideStructure.SongSlides, id:\.id) { slide in
if slide.id == selectedSlide?.id {
Slide(IsSelected:true, SlideData: slide)
} else {
Slide(IsSelected:false, SlideData: slide)
.onTapGesture {
selectSlide(Slide: slide)
}
}
}
}.onAppear(perform: loadSelectedFile)
}
}
Here is the Slide File which also shows how I am setting the colours for the slides:
struct Slide : View {
#State var EnableSlideEditing : Bool? = false
#State var IsSelected : Bool = false
#State var SlideData : SplaySlide
#EnvironmentObject var SlideStructure : SlidesModel
var body : some View {
VStack {
Group{
VStack(alignment: .center) {
let editor = TextEditor(text: $SlideData.lyric)
.multilineTextAlignment(.center)
.padding()
let text = Text(SlideData.lyric)
.multilineTextAlignment(.center)
.frame(width: 320.0, height: 160.0)
if EnableSlideEditing ?? false {
editor
} else {
text
}
Group {
HStack {
Text(SlideData.slideType)
.padding(.leading, 5.0)
Spacer()
MenuButton(label: Image(systemName: "ellipsis.circle")) {
Button("Edit Slide Text", action: {EnableSlideEditing?.toggle()})
Divider()
Menu("Slide Type") {
Button("Verse", action: {SlideType(Type: "Verse", ColorHex: "#f57242")})
Button("Chorus", action: {SlideType(Type: "Chorus", ColorHex: "#0068bd")})
Button("Pre-Chorus", action: {SlideType(Type: "Pre-Chorus", ColorHex: "#02ad96")})
Button("Tag", action: {SlideType(Type: "Tag", ColorHex: "#ad027d")})
Button("Bridge", action: {SlideType(Type: "Bridge", ColorHex: "#02ad96")})
}
Menu("Transitions") {
Button("Option 1", action: {})
Button("Option 2", action: {})
}
Divider()
Button("Delete Slide", action: {})
Button("Duplicate Slide", action: {})
}
.menuButtonStyle(BorderlessButtonMenuButtonStyle())
.frame(alignment: .trailing)
.padding(.trailing, 5.0)
.buttonStyle(PlainButtonStyle())
}
}
.frame(width: 320, height: 20, alignment: .leading)
.background(Color.init(hex: SlideData.slideBorderColorHex))
}
}
.frame(width: 320, height: 180, alignment: .bottomLeading)
.background(IsSelected ? Color.accentColor : .black)
.cornerRadius(10)
}
}
func SlideType(Type:String, ColorHex: String) {
for (index, slide) in SlideStructure.SongSlides.enumerated() {
if slide.id == self.SlideData.id {
SlideStructure.SongSlides[index].slideBorderColorHex = ColorHex
SlideStructure.SongSlides[index].slideType = Type
ShowSongFile.main?.SongFile.slides = SlideStructure.SongSlides
ShowSongFile.main!.SongFile.SaveSongToDisk()
}
}
}
}
SlideStructure: (SlideModel)
class SlidesModel : ObservableObject {
#Published var SongSlides : [SplaySlide] = []
}

Answer 1

There are too many missing parts to be able to test any particular solution, so I will take a guess.
In ShowSongFile you could try :
LazyVGrid(columns: columns, alignment: .trailing, spacing: 20) {
ForEach(SlideStructure.SongSlides, id:\.id) { slide in
Slide(SlideData: slide) // <--- here
.onTapGesture {
selectSlide(Slide: slide)
}
.background(slide.id == selectedSlide?.id ? Color.accentColor : .black) // <--- here
}
and adjust Slide accordingly, that is, remove IsSelected and .background(IsSelected ? Color.accentColor : .black).
P.S: your naming and case of your variables and functions makes
reading your code less than appealing.