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

相关推荐
aha-凯心38 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636022 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端