SwiftUI 理解 Binding 和 @Binding

最近在学习SwiftUI，写了如下代码

struct FavoriteButton: View {
    @Binding var isSet: Bool
    
    var body: some View {
        Button {
            isSet.toggle()
        } label: {
            Label("Toggle Favorite", systemImage: isSet ? "star.fill" : "star")
                .labelStyle(.iconOnly)
                .foregroundStyle(isSet ? .yellow : .gray)
        }
    }
}

#Preview {
	// 写法1
    FavoriteButton(isSet: .constant(true))
    // 写法2
    FavoriteButton(isSet: true)
}

为什么写法2会报编译错误呢？？？

一、原因探究

在 SwiftUI 中，FavoriteButton 是一个自定义视图，它可能期望一个 Binding<Bool> 类型的参数 isSet，而不是一个普通的 Bool 值。这是因为 Binding 允许视图与外部状态进行双向绑定，而普通的 Bool 值只是一个不可变的常量。

1. FavoriteButton(isSet: .constant(true)) 是正确的

• Binding<Bool>：Binding 是一个包装器，它允许视图读取和修改外部的状态。通过 Binding，FavoriteButton 可以更新外部的状态，而不仅仅是读取它。
• .constant(true)：Binding.constant(true) 创建了一个不可变的 Binding，它的值始终为 true。虽然这个 Binding 是不可变的，但它仍然符合 Binding<Bool> 的类型要求，因此可以传递给 FavoriteButton。

2. FavoriteButton(isSet: true) 是错误的

• Bool：true 是一个普通的 Bool 值，它不是 Binding<Bool> 类型。
• 类型不匹配：FavoriteButton 期望一个 Binding<Bool> 类型的参数，而你传递了一个 Bool 值，因此会导致编译错误。

二、理解 SwiftUI 中的 Binding 和 @Binding

在 SwiftUI 中，Binding 是一个非常重要的概念，它允许视图与外部状态进行双向绑定。通过 Binding，视图不仅可以读取外部的状态，还可以修改它。本文将介绍 Binding 的基本用法，并通过一个实际的例子来说明为什么在某些情况下必须使用 Binding。

1. 什么是 Binding

Binding 是 SwiftUI 中的一个属性包装器，它允许视图与外部状态进行双向绑定。Binding 的主要作用是：

• 读取外部状态：视图可以读取 Binding 中的值。
• 修改外部状态：视图可以修改 Binding 中的值，从而更新外部的状态。

2. 为什么需要 Binding

在 SwiftUI 中，视图通常是不可变的。如果你想要视图能够修改外部的状态，你需要使用 Binding。Binding 允许视图与外部状态进行双向绑定，从而实现动态的 UI 更新。

3. 示例解释

假设我们有一个 FavoriteButton 视图，它允许用户标记或取消标记某个项目为收藏。这个按钮需要一个 Binding<Bool> 类型的参数 isSet，用于表示当前项目是否被收藏。

import SwiftUI

struct FavoriteButton: View {
    @Binding var isSet: Bool

    var body: some View {
        Button(action: {
            isSet.toggle()
        }) {
            Image(systemName: isSet ? "star.fill" : "star")
                .foregroundColor(isSet ? .yellow : .gray)
        }
    }
}

在这个例子中，FavoriteButton 使用 @Binding 来声明 isSet 参数。这意味着 FavoriteButton 可以读取和修改 isSet 的值。

4. 正确使用 Binding

为了正确使用 FavoriteButton，我们需要传递一个 Binding<Bool> 类型的参数。例如：

struct ContentView: View {
    @State private var isFavorite = true

    var body: some View {
        VStack {
            FavoriteButton(isSet: $isFavorite)
            Text(isFavorite ? "Favorited" : "Not Favorited")
        }
    }
}

在这个例子中，我们使用 @State 来声明 isFavorite 状态，并通过 $isFavorite 创建一个 Binding，然后将其传递给 FavoriteButton。

5. 错误的使用方式

如果你尝试直接传递一个 Bool 值给 FavoriteButton，例如：

FavoriteButton(isSet: true)

这会导致编译错误，因为 FavoriteButton 期望一个 Binding<Bool> 类型的参数，而你传递了一个 Bool 值。

6. 总结

• Binding 允许视图与外部状态进行双向绑定。
• @Binding 用于声明视图中的 Binding 参数。
• 在 SwiftUI 中，如果你需要视图能够修改外部的状态，你必须使用 Binding。