Toggle的基本用法

在 SwiftUI 中，Toggle 是一个用于表示布尔状态（开/关）的交互控件，类似于 UIKit 中的 UISwitch。以下是它的完整使用指南：

---

一、基本用法

1. 最简实现（需绑定 @State）

struct ContentView: View {
    @State private var isOn = false // 必须使用状态绑定

    var body: some View {
        Toggle("开关标题", isOn: $isOn)
    }
}

2. 无标签版本

Toggle(isOn: $isOn) {
    Text("自定义标签") // 支持任意视图
}

---

二、核心功能

1. 样式定制

Toggle("深色模式", isOn: $isDarkMode)
    .toggleStyle(SwitchToggleStyle(tint: .blue)) // iOS默认样式
    // 其他样式：
    // .toggleStyle(CheckboxToggleStyle()) // macOS样式
    // .toggleStyle(ButtonToggleStyle())  // 按钮样式

2. 动态禁用用

Toggle("选项", isOn: $isEnabled)
    .disabled(!networkAvailable) // 根据条件禁用

3. 自定义触发逻辑

Toggle("高级选项", isOn: Binding(
    get: { model.isAdvanced },
    set: { newValue in
        // 可以在这里添加额外逻辑
        model.isAdvanced = newValue
    }
))

---

三、样式深度定制

1. 完全自定义样式

struct CustomToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.label
            Spacer()
            RoundedRectangle(cornerRadius: 16)
                .fill(configuration.isOn ? Color.green : Color.gray)
                .frame(width: 50, height: 30)
                .overlay(
                    Circle()
                        .fill(Color.white)
                        .padding(2)
                        .offset(x: configuration.isOn ? 10 : -10)
                )
                .onTapGesture {
                    withAnimation {
                        configuration.$isOn.wrappedValue.toggle()
                    }
                }
        }
    }
}

// 使用
Toggle("自定义开关", isOn: $isOn)
    .toggleStyle(CustomToggleStyle())

2. 平台专属样式

样式类型	适用平台	特点
SwitchToggleStyle	iOS	经典滑动开关
CheckboxToggleStyle	macOS	复选框样式
ButtonToggleStyle	通用	按钮式切换

---

四、高级技巧

1. 与 onChange 结合

Toggle("通知", isOn: $showNotifications)
    .onChange(of: showNotifications) { newValue in
        NotificationManager.shared.toggleNotifications(enabled: newValue)
    }

2. 组合使用

Form {
    Toggle("Wi-Fi", isOn: $wifiEnabled)
    if wifiEnabled {
        Picker("网络", selection: $network) {
            ForEach(networks, id: \.self) { Text($0) }
        }
    }
}

---

五、注意事项

1. 必须绑定到 @State 或 @Binding：直接传递普通布尔值会报错
2. 标签可隐藏 ：用 Toggle("", isOn: $isOn) 实现无文字开关
3. 样式兼容性 ：某些样式（如 CheckboxToggleStyle）仅在特定平台有效

如果需要实现更复杂的交互逻辑（如三级开关），可以组合多个 Toggle 或自定义 View。