SwiftUI之Toggle开关切换控件使用详解与案例

Toggle 通常是用来表示开关的控件,它只能有两种状态即:TrueFalse ,通过绑定 Bool 类型变量维护 Toggle 开关的状态。

Toggle 初始化声明方式:

init(isOn: Binding<Bool>, label: () -> Label)    //创建自定义 Label 文本视图的开关
init(LocalizedStringKey, isOn: Binding<Bool>)    //创建 Label 文本为 本地化字符串 的开关
init<S>(S, isOn: Binding<Bool>)                  //创建 Label 文本为字符串的开关
新特性:通过一个开关控制整个集合的状态

sources 参数可传入一个数据集合,通过 isOn 参数指定需绑定的集合开关状态字段,达到一个 Toggle 控制整个数据集合的开关状态。

init<S, C>(S, sources: C, isOn: KeyPath<C.Element, Binding<Bool>>)
init<C>(sources: C, isOn: KeyPath<C.Element, Binding<Bool>>, label: () -> Label)
init<C>(LocalizedStringKey, sources: C, isOn: KeyPath<C.Element, Binding<Bool>>)

初始化示例

weekList 中周一至周五全是 True 则周报集合方式开关也更新为 True ;

改变周报集合 Toggle 开关的状态会直接更新 weekList 中每个数据项的状态。

import SwiftUI

struct ToggleView: View {
    
    @State private var weekList = [
        WeekInfo(name: "周一", sign: true),
        WeekInfo(name: "周二", sign: true),
        WeekInfo(name: "周三", sign: true),
        WeekInfo(name: "周四", sign: true),
        WeekInfo(name: "周五", sign: true),
    ]
    
    var body: some View {
        VStack {
            Form {
                Section("周报") {
                    Toggle(sources: $weekList, isOn: \.sign) {
                        Text("满勤")
                    }
                }
                Section("考勤") {
                    ForEach($weekList, id: \.name) { $item in
                        Toggle(item.name, isOn: $item.sign)
                    }
                }
            }
        }
    }
}

struct WeekInfo {
    let name: String
    var sign: Bool
}

使用 ToggleStyle 自定义Toggle视图

默认的 toggleStyle 拥有 switchbutton 两种类型,button 即是普通按钮样式,如果有更多要求,可以自己实现一个 toggleStyle ,见以下示例:

  • 遵循 ToggleStyle 协议
  • 实现 func makeBody(configuration: Configuration) -> some View
struct CustToggleStyle: ToggleStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.label
                .fontWeight(.medium)
            Spacer()
            withAnimation {
                Image(systemName: configuration.isOn ? "lightswitch.on" : "lightswitch.off")
                    .font(.system(size: 28))
                    .foregroundColor(configuration.isOn ? .yellow : .gray)
                    .rotationEffect(.degrees(90), anchor: .center)
                    .onTapGesture {
                        withAnimation(.spring()) {
                            configuration.isOn.toggle()
                        }
                    }
            }
        }
    }
    
}

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/950.html ·

(0)
上一篇 2023-03-21 上午10:30
下一篇 2023-03-27 上午11:47

发表回复

登录后才能评论