SwiftUI开关控件Toggle

在 SwiftUI 中，Toggle 是一个用于创建开关控件的视图组件。它通常用于布尔值的切换（例如启用或禁用某个功能）。

基本用法

首先需要声明一个可以绑定的Bool变量：

@State private var isOn: Bool = false

在视图中添加Toggle视图：

Toggle("Enable Feature", isOn: $isOn)

当点击Toggle时，会切换Bool变量的值。

示例代码：简单的 Toggle

struct ToggleExample: View {
    @State private var isOn: Bool = false

    var body: some View {
        VStack {
            Toggle("Enable Feature", isOn: $isOn)
                .padding()
            
            Text("The feature is \(isOn ? "enabled" : "disabled").")
        }
        .padding()
    }
}

效果说明：

@State 变量 isOn 控制 Toggle 的状态。

当 Toggle 被切换时，isOn 的值会自动更新，并触发界面重新渲染。

自定义 Toggle

添加颜色和样式

struct CustomToggleExample: View {
    @State private var isOn: Bool = false

    var body: some View {
        Toggle(isOn: $isOn) {
            Text("Enable Notifications")
                .font(.headline)
                .foregroundColor(isOn ? .green : .gray)
        }
        .toggleStyle(SwitchToggleStyle(tint: .red)) // 自定义颜色
        .padding()
    }
}

隐藏 Label

如果不需要显示 Toggle 的文本标签，可以隐藏：

Toggle("", isOn: $isOn)
    .labelsHidden()
    .padding()

ToggleStyle

ToggleStyle 提供了对 Toggle 的外观进行自定义的能力。

内置 Toggle 样式

1、DefaultToggleStyle（默认样式）

2、SwitchToggleStyle

Toggle("Enable Option", isOn: $isOn)
    .toggleStyle(SwitchToggleStyle(tint: .red))

自定义 Toggle 样式

struct CustomToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.label
            Spacer()
            Circle()
                .frame(width: 50, height: 50)
                .foregroundColor(configuration.isOn ? .green : .gray)
                .onTapGesture {
                    configuration.isOn.toggle()
                }
        }
    }
}

struct CustomToggleView: View {
    @State private var isOn: Bool = false

    var body: some View {
        Toggle("Custom Toggle", isOn: $isOn)
            .toggleStyle(CustomToggleStyle())
            .padding()
    }
}

总结

Toggle 是用于布尔值切换的基础控件。

支持多种样式，可以通过 ToggleStyle 自定义。

结合文本、图标或颜色，可以创建个性化的用户体验。