SwiftUI中的@State与@Binding

@State基础

@State用于在视图中存储可变状态。

Name
基本概念
Type
concept
Description
- 用于简单的值类型数据
- SwiftUI管理的存储
- 值改变会触发视图刷新
- 仅在当前视图内使用
Name
使用场景
Type
usage
Description
- 表单输入
- 开关状态
- 临时状态
- 动画状态

@State示例

struct ContentView: View {
    @State private var text = ""
    @State private var isOn = false
    
    var body: some View {
        VStack {
            TextField("输入文本", text: $text)
            
            Toggle("开关", isOn: $isOn)
            
            Text("当前输入: \(text)")
            Text("开关状态: \(isOn ? "开" : "关")")
        }
    }
}

@Binding

@Binding用于在视图间传递状态引用。

Name
关键特性
Type
features
Description
- 创建双向绑定
- 引用源状态
- 支持值传递
- 实现视图通信
Name
常见用法
Type
common
Description
- 自定义视图组件
- 父子视图通信
- 状态共享
- 双向数据流

@Binding示例

struct CustomToggle: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Button(action: {
            isOn.toggle()
        }) {
            Text(isOn ? "开启" : "关闭")
                .padding()
                .background(isOn ? Color.green : Color.gray)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
    }
}

struct ParentView: View {
    @State private var toggleState = false
    
    var body: some View {
        VStack {
            CustomToggle(isOn: $toggleState)
            Text("开关状态: \(toggleState ? "开启" : "关闭")")
        }
    }
}

状态管理最佳实践

@State和@Binding的使用建议。

Name
设计原则
Type
principles
Description
- 状态最小化
- 合理划分职责
- 避免状态泄露
- 保持单向数据流
Name
注意事项
Type
cautions
Description
- @State仅用于简单数据
- 正确使用private修饰符
- 避免过度传递Binding
- 及时释放不需要的状态

最佳实践示例

struct ProfileView: View {
    // 简单状态使用@State
    @State private var isEditing = false
    @State private var name = ""
    
    // 复杂状态使用其他方案(如ObservableObject)
    @StateObject private var viewModel = ProfileViewModel()
    
    var body: some View {
        Form {
            // 仅在必要时传递Binding
            TextField("姓名", text: $name)
            CustomEditButton(isEditing: $isEditing)
            
            if isEditing {
                // 编辑模式UI
            }
        }
    }
}