SwiftUI 之 @State 和 @Binding 的区别

IOS

2023-12-26 12:49:31

好的，以下是一篇关于 SwiftUI 中 @State 和 @Binding 区别的博文。

@State 和 @Binding 的概念

@State 是一个属性包装器，它允许你声明一个状态变量，并在该变量发生改变时自动更新视图。当一个 @State 变量的值发生改变时，整个视图都会重新渲染。

@Binding 也是一个属性包装器，它允许你在两个视图之间共享状态。当一个 @Binding 变量的值发生改变时，只有绑定该变量的视图才会重新渲染。

@State 和 @Binding 的区别

@State 和 @Binding 的主要区别在于它们的作用范围。@State 变量的作用范围仅限于声明它的视图，而 @Binding 变量的作用范围可以跨多个视图。

@State 变量只能在声明它的视图中使用，而 @Binding 变量可以在任何视图中使用，只要该视图绑定了该变量。

@State 和 @Binding 的使用场景

@State 通常用于管理单个视图的状态，例如一个按钮的选中状态或一个文本字段的输入内容。

@Binding 通常用于在多个视图之间共享状态，例如一个列表视图和一个详细视图之间的共享数据。

示例

以下是一个使用 @State 和 @Binding 的示例：

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

  var body: some View {
    VStack {
      Button(action: {
        isFavorite.toggle()
      }) {
        Text("Toggle Favorite")
      }

      if isFavorite {
        Text("Favorite")
      } else {
        Text("Not Favorite")
      }
    }
  }
}

struct FilterView: View {
  @Binding var isFavorite: Bool

  var body: some View {
    VStack {
      Text("Filter by Favorite")
      Toggle("Favorite", isOn: $isFavorite)
    }
  }
}

在这个示例中，ContentView 使用 @State 来管理 isFavorite 变量的状态，而 FilterView 使用 @Binding 来绑定 isFavorite 变量。当用户点击 FilterView 中的开关时，isFavorite 变量的值会发生改变，ContentView 和 FilterView 都会重新渲染。