使用 SwiftUI 切换从集合（集合、数组或字典）中添加或删除项目

Question

我正在构建一个类似于 Apple 的 Fruta SwiftUI 示例应用中的“收藏夹”功能的功能。该应用程序的用户可以查看冰沙列表并将任何冰沙标记为“最喜欢的”。收藏夹列表存储在单独的屏幕上并可供查看。

下面的示例视图做了两个重要的事情：

1. 它会检查冰沙是否已经在isFavorite 的收藏夹列表中，以便可以通过按钮图像反映这一点。
2. 它使用toggleFavorite 在收藏夹列表中添加/删除冰沙。

型号：

struct Smoothie: Identifiable, Codable {
    var id: String
    var title: String
    var description: String
    var hasFreeRecipe = false
}

class FrutaModel: ObservableObject {
    @Published private(set) var favoriteSmoothieIDs = Set<Smoothie.ID>()

    func toggleFavorite(smoothie: Smoothie) {
        if favoriteSmoothieIDs.contains(smoothie.id) {
            favoriteSmoothieIDs.remove(smoothie.id)
        } else {
            favoriteSmoothieIDs.insert(smoothie.id)
        }
    }
    
    func isFavorite(smoothie: Smoothie) -> Bool {
        favoriteSmoothieIDs.contains(smoothie.id)
    }
}

用于（取消）收藏冰沙的按钮视图：

struct SmoothieFavoriteButton: View {
    @EnvironmentObject private var model: FrutaModel
    
    var smoothie: Smoothie?
    
    var isFavorite: Bool {
        guard let smoothie = smoothie else { return false }
        return model.favoriteSmoothieIDs.contains(smoothie.id)
    }
    
    var body: some View {
        Button(action: toggleFavorite) {
            Label("Favorite", systemImage: isFavorite ? "heart.fill" : "heart")
        }
    }
    
    func toggleFavorite() {
        guard let smoothie = smoothie else { return }
        model.toggleFavorite(smoothie: smoothie)
    }
}

我的问题：如何在使用 Toggle 而不是 Button 时获得类似的结果？ Toggle 需要绑定作为属性，但由于特定冰沙的 isFavorite 值来自包含完整收藏夹列表的 Set (favoriteSmoothieIDs)，因此我不能简单地为 Toggle 提供绑定。

Answer 1

这是必需的代码：

@State var isToggleFavorite = false

Toggle("", isOn: $isToggleFavorite)
            .onChange(of: isToggleFavorite) { value in
                guard let smoothie = smoothie else { return }
                model.toggleFavorite(smoothie: smoothie)
            }

在这里，我添加了响应您的请求的代码，并保留了原始代码。

struct SmoothieFavoriteButton: View {
    @EnvironmentObject private var model: FrutaModel
    
    var smoothie: Smoothie?

    @State var isToggleFavorite = false // <== Newly Added

    var isFavorite: Bool {
        guard let smoothie = smoothie else { return false }
        return model.favoriteSmoothieIDs.contains(smoothie.id)
    }
    var body: some View {
        Toggle("", isOn: $isToggleFavorite)
            .onChange(of: isToggleFavorite) { value in
                guard let smoothie = smoothie else { return }
                model.toggleFavorite(smoothie: smoothie)
            } // <== Newly Added

        Button(action: toggleFavorite) {
            Label("Favorite", systemImage: isFavorite ? "heart.fill" : "heart")
        }
        .foregroundColor(isFavorite ? .accentColor : nil)
        .accessibility(label: Text("\(isFavorite ? "Remove from" : "Add to") Favorites"))
        } // <== Newly Added
    } 
    
    func toggleFavorite() {
        guard let smoothie = smoothie else { return }
        model.toggleFavorite(smoothie: smoothie)
    }
}

[]

您可以将按钮替换为 Text 对象：

 Text(isToggleFavorite ? Image(systemName: "heart.fill"): Image(systemName: "heart"))

但是您需要保留 isFavorite 值。

如果可以接受将心脏放在开关的左侧，您可以完全移除按钮并将心脏图像放在开关的标签内：

Toggle(isOn: $isToggleFavorite) {
                isToggleFavorite ?
                    Image(systemName: "heart.fill") : Image(systemName: "heart")
            }
            .onChange(of: isToggleFavorite) { value in
                guard let smoothie = smoothie else { return }
                model.toggleFavorite(smoothie: smoothie)
            }

您有多种选择。