Toggle的基本用法

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


一、基本用法

1. 最简实现(需绑定 @State

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

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

2. 无标签版本

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

二、核心功能

1. 样式定制

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

2. 动态禁用用

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

3. 自定义触发逻辑

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

三、样式深度定制

1. 完全自定义样式

swift 复制代码
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 结合

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

2. 组合使用

swift 复制代码
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

相关推荐
Java水解6 分钟前
Web API基础
前端
闲鱼不闲7 分钟前
实现iframe重定向通知父级页面跳转
前端
咸鱼青菜好好味8 分钟前
node的项目实战相关-2-前台接口
前端
春秋半夏9 分钟前
音乐播放、歌词滚动
前端·css
Sioncovy12 分钟前
Zustand 源码阅读计划(3)- JS 篇 - Middlewares 中间件逻辑
前端·javascript
bo5210014 分钟前
垃圾回收机制详解
前端
多啦C梦a16 分钟前
🪄 这么优雅?`useContext` + 自定义 Hooks:优雅管理全局状态,从主题切换说起
前端·javascript·react.js
患得患失94927 分钟前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
快起来别睡了41 分钟前
React 是如何用 JSX 写页面,却能被浏览器执行的?——Babel 的魔法解析
前端
喧星Aries1 小时前
进程调度的时机,切换与过程方式(操作系统OS)
java·服务器·前端·操作系统·进程调度