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

Question

我目前正在尝试通过实现一个小项目来学习 SwiftUI。为此，我在 LazyVGrid（GameList 视图）中列出了视频游戏及其封面和标题（GameCard 视图）。来自 URL 的图像的显示和异步加载已经运行良好。

现在我尝试集成一个收藏夹功能。为此，我在每个 GameCard 视图中显示一个按钮，显示一个填充或空心的心，具体取决于 UserDefaults 中的游戏 ID 是否可用。按钮的操作随时有效：如果游戏 ID 已经在用户默认值中，则该 ID 将被删除。如果它还不存在，它将被添加。使用 prints() 可以很容易地观察到这一点。效果不佳的是心形图标的切换：如果我将 LazyVGrid 向下滚动到最初不可见的区域并按下按钮，有时（不总是！）会发生图标未被替换的情况（即使触发了操作）。

我猜这是由于 LazyVGrid 或 LazyVStack。如果我在正常的 VStack 中显示 GameCards，我无法重现该现象。

你知道如何解决这个问题或者这是什么原因吗？

有关更多上下文，请参阅下面的一些实施片段。我所说的按钮位于 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{[=10=].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: { [=11=].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)
    }
}

更新：我添加了 Favorites.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, updates all views, 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)
    }

}

Answer 1

通过实际发布和审查 Favorites.swift 实施（谢谢@Asperi）我想我发现了问题（至少它不再可重现）：

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

我现在只是想知道，为什么在常规 VStack 中情况并非如此。也许有人可以详细说明一下？

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

Inconsistent icon toggling in buttons while using LazyVGrid or LazyVStack

swift

swiftui

ios14