Niestandardowe elementy interfejsu użytkownika nie są aktualizowane w LazyVGrid

0

Pytanie

Stworzyłem własny element, który wyzywam Slide. Mam LazyVGrid to pokazuje moje Slide elementy. Mój problem polega na tym, że kiedy aktualizować tablicę danych, używany przez moją siatką, Slide elementy nie są aktualizowane.

Scenariusz: Użytkownik kliknie na przycisk ustawienia na Slide i zmienia Slide kolor, a następnie aktualizować tablicę danych, ale Slide element nie jest aktualizowany, nie zważając na poprawność danych (sprawdziłem to, dodając Text(slide.color) w LazyVGrid który wyświetla tylko że ustalony kolor, jak oczekiwano)

Moje Podejrzenia: Zakładam, że on nie jest aktualizowana, bo u mnie coś nie tak Slide struktura, jestem zupełnie początkujący w SwiftUI, dlatego uczę się w toku sprawy. Muszę też wspomnieć, że to są ładowane i wyświetlane prawidłowo przy pierwszym wyświetleniu prezentacji, jedyny problem polega na tym, że ono nie jest aktualizowany po aktualizacji SlideStructure.

Oto kod:

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

Oto plik slajdów, w którym pokazano, jak ja ustawiam kolory do slajdów:

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

Struktura slajdów: (model slajdów)

class SlidesModel : ObservableObject {
@Published var SongSlides : [SplaySlide] = []
}
swiftui
2021-11-23 03:59:03
1

Najlepsza odpowiedź

0

Istnieje zbyt wiele brakujących części, aby można było przetestować jakieś konkretne rozwiązanie, więc zrobię założenie. W ShowSongFile można spróbować :

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
    }
            
            

i wyreguluj Slide odpowiednio, czyli usunąć IsSelected i .background(IsSelected ? Color.accentColor : .black).

P. S: twoje imię i wielkość twoich zmiennych i funkcji sprawiają, że czytanie twojego kodu mniej atrakcyjne.

2021-11-23 04:33:26

W innych językach

Ta strona jest w innych językach

Русский
..................................................................................................................
Italiano
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................