使用LazyVGrid或LazyVStack时按钮中的图标切换不一致

如何解决使用LazyVGrid或LazyVStack时按钮中的图标切换不一致

我目前正在尝试通过实施一个小项目来学习SwiftUI。为此，我在LazyVGrid（游戏列表视图）中列出了视频游戏及其封面和标题（游戏卡视图）。从URL进行显示和异步加载图像已经很好用了。

现在，我尝试集成收藏夹功能。为此，我在每个GameCard视图中显示一个按钮，根据用户默认值中是否提供了游戏ID，该按钮显示空心或空心。该按钮的操作随时可用：如果“游戏ID”已经在“用户默认设置”中，则该ID将被删除。如果尚不存在，它将被添加。这可以通过prints（）轻松观察到。切换心脏图标的效果并不理想：如果我将LazyVGrid进一步向下滚动到最初不可见的区域，然后按下按钮，有时（并非总是如此！）会发生图标没有被替换的情况（即使该操作已触发）。

我的猜测是这是由于LazyVGrid或LazyVStack引起的。如果我在普通的VStack中显示游戏卡，则无法重现该现象。

您是否知道如何解决此问题？是什么原因？

有关更多上下文，请参见下面的一些实现摘要。我正在谈论的按钮位于GameCard.swift中，其中包含Image(systemName: favorites.contains(self.game) ? "heart.fill" : "heart")

GameListView.swift

struct GameListView: View {

@Binding var loadGames: Bool

@ObservedObject var gameList: GameList = GameList()

@ObservedObject var favorites = Favorites()

@State private var selectedGame: Game? = nil

@State private var searchText = ""

init(loadGames: Binding<Bool>) {
    self._loadGames = loadGames     
    ...
}

let layout = [
    GridItem(.flexible(),spacing: 16),GridItem(.flexible(),spacing: 16)
]


var body: some View {
        NavigationView {
            ZStack {
                Color.black
                    .edgesIgnoringSafeArea(.all)
            ScrollView {
                SearchBarView(searchText: $searchText)
                    .padding(.top,16.0)
                if gameList.isLoading {
                    Text("Loading")
                        .foregroundColor(Color.white)
                } else {
                LazyVGrid(columns: layout,spacing: 16) {
                    ForEach(gameList.games.filter{$0.name.contains(searchText) || searchText == ""}) {game in
                        GameCard(game: game)
                            .onTapGesture {
                                self.selectedGame = game
                                print(self.selectedGame!)
                            }
                    }
                }
                .sheet(item: $selectedGame) { game in
                    GameDetail(game: game)
                    }
                .padding(.all)
                .background(Color.black)
                .edgesIgnoringSafeArea(.all)
                .navigationBarTitle("Upcoming Games")
                .resignKeyboardOnDragGesture()
                }
            }
            }
        }.onAppear {
            if loadGames {
                self.gameList.reload()
                loadGames = false
            }
        }
        .environmentObject(favorites)
    }
}

GameCard.swift

struct GameCard: View {

var game: Game

@Environment(\.imageCache) var cache: ImageCache

@EnvironmentObject var favorites: Favorites

var body: some View {
        VStack(alignment: .leading) {
            ZStack(alignment: .topTrailing) {
                AsyncImage(
                   url: game.coverURL!,cache: self.cache,placeholder: Text(game.name),configuration: { $0.resizable() }
                )
                .cornerRadius(4.0)
                .aspectRatio(contentMode: .fit)
                Button(action: {
                    if self.favorites.contains(self.game) {
                        print("Remove Game from Favs")
                        self.favorites.remove(self.game)
                    } else {
                        print("Add Game to Favs")
                        self.favorites.add(self.game)
                    }
                }) {
                    Image(systemName: favorites.contains(self.game) ? "heart.fill" : "heart")
                        .imageScale(.large)
                }
                .padding([.top,.trailing])
            }
            Text(game.name)
                .font(.body)
                .foregroundColor(Color.white)
                .fontWeight(.semibold)
                .lineLimit(1)
                .lineSpacing(32)
                .padding(.bottom,0.5)
            Text(game.releaseDateText)
                .font(.subheadline)
                .foregroundColor(Color.gray)
                .lineLimit(0)
        }
        .padding(.all,8.0)
        .background(Color(red: 1.0,green: 1.0,blue: 1.0,opacity: 0.15))
        .cornerRadius(8.0)
    }
}

更新：我添加了收藏夹.swift的实现。这是触发视图更改的地方。

class Favorites: ObservableObject {

//The fetched games by id are stored here.
@Published var favGames: [Game] = []

@Published var isLoading = false

var gameService = Store.shared

let userDefaults = UserDefaults.standard

// the key we're using to read/write in UserDefaults
private let saveKey = "Favorites"

// the actual game ids the user has favorited
var games: [String]

init() {
    // load our saved data
    self.games = userDefaults.stringArray(forKey: saveKey) ?? []
}

// returns true if set contains the game
func contains(_ game: Game) -> Bool {
    return games.contains(String(game.id))
}

// adds gams to set,updates all views,and saves the change
func add(_ game: Game) {
    objectWillChange.send()
    games.append(String(game.id))
    save()
}

// removes the game from  set,and saves the change
func remove(_ game: Game) {
    objectWillChange.send()
    games.remove(object: String(game.id))
    save()
}

func save() {
    // write out our data
    UserDefaults.standard.set(self.games,forKey: saveKey)
    print(games)
    print("Saved new set of favorites")
}
    
func reload() {
    self.favGames = []
    self.isLoading = true
            
    gameService.fetchGamesById(id: self.games) { [weak self]  (result) in
        self?.isLoading = false

        switch result {
        case .success(let games):
            self?.favGames = games

        case .failure(let error):
            print(error.localizedDescription)
        }
      }
   }
}

extension Array where Element: Equatable {

// Remove first collection element that is equal to the given `object`:
mutating func remove(object: Element) {
    guard let index = firstIndex(of: object) else {return}
    remove(at: index)
    }

}

解决方法

通过实际发布和查看“ Favorites.swift”实现（感谢@Asperi），我认为我发现了这个问题（至少不再可复制）：

objectWillSend.send()在games.append(String(game.id))和games.remove(String(game.id))函数的add和remove之前被调用，这些函数由GameCard.swift中的按钮动作调用。我认为这导致在某些情况下甚至在将游戏添加到收藏夹或从收藏夹中删除之前更新视图。

我现在想知道，为什么在常规VStack中不是这种情况。 也许有人可以对此进行详细说明？