SwiftUI 状态管理 - @State

148 阅读2分钟

在 SwiftUI 中,@State 属性包装器用于管理视图的本地、私有状态。当 @State 修饰的变量发生改变时,SwiftUI 会自动重新渲染依赖该变量的视图。@State 是 SwiftUI 状态管理中最基础、最常用的修饰符,适合用来存储简单的、只在单个视图中使用的状态。

使用它我们只需要关心状态变量的修改和使用,无需在关心修改后如何再给 UI 控件赋值的问题。

@State 的基本用法

@State 通常用于绑定视图中的用户交互控件(如 ToggleButtonSliderTextField 等),以便在这些控件改变时更新视图。

以下示例展示了一个按钮和一个计数器,每次点击按钮时,计数器会增加 1。

struct ContentView: View {
    @State private var count = 0 // 用 @State 修饰计数器变量

    var body: some View {
        VStack {
            Text("Count: \(count)")
                .font(.largeTitle)
            
            Button(action: {
                count += 1 // 更新 count,触发视图刷新
            }) {
                Text("Increase Count")
            }
            .padding()
        }
    }
}

在这个示例中,count 是一个 @State 变量。每次点击按钮时,count 会增加 1,SwiftUI 自动检测到 count 的变化并重新渲染视图。

Toggle 控件也非常适合用 @State 来绑定一个布尔值,用于跟踪开关状态。

struct ContentView: View {
    @State private var isOn = false // 用 @State 修饰开关状态

    var body: some View {
        VStack {
            Toggle("Toggle Switch", isOn: $isOn) // 绑定 isOn
                .padding()

            Text(isOn ? "Switch is ON" : "Switch is OFF")
        }
    }
}

在此示例中,isOn 变量绑定到 Toggle 上。用户切换开关时,isOn 值发生变化,导致文本更新显示当前开关状态。

适合 @State 的使用场景:

  • 适合在视图内使用的简单状态(例如:布尔值、计数器、文本输入等)。
  • 状态仅在当前视图中需要使用,且不需要共享给其他视图。

总结

@State 是 SwiftUI 中用于管理本地状态的基本属性包装器。它让我们能够轻松地响应用户交互事件并在数据更新时自动刷新视图,从而帮助创建动态交互的 UI。