SwiftUI 4.0（iOS 16）极简实现一个美美哒的多选 Toggle 按钮组

SwiftUI 4.0（iOS 16）极简实现一个美美哒的多选 Toggle 按钮组

概览

在 SwiftUI 4.0 之前，想要实现如下效果的多选/全选 Toggle 按钮组是要写不少行代码滴：

不过，在 iOS 16 之后我们仅用1行代码即可搞定以上所有！在某些场合下这非常有用哦。

在本篇博文中，我们就来看看如何实现它吧。

Let’s go！！！😉

代码实现

Toggle 是 SwiftUI 中一个非常常用的视图，我们一般将它和某一个布尔状态绑定，以实现状态切换功能：

@State var switchToggleStyle = trueToggle("Switch样式", isOn: $switchToggleStyle)

从 SwiftUI 4.0 开始，Apple 为 Toggle 组件加入了若干新的构造器：

我们随便看其中一个：

可以看到，新的构造器传入一组布尔状态绑定，然后在整个组上操作Toggle。

PS：以下是 WWDC 22 中关于该代码的示例，不过貌似语法已过时，现在已无法编译通过：

为了能让 Toggle 感知到组的力量，我们只需要将所有状态的绑定打包到组中，然后传入构造器即可：

extension View {@ViewBuilder func enableToggleStyle(_ isSwitch: Bool) -> some View {if isSwitch {leStyle(.switch)}else{leStyle(.button)}}
}struct ContentView: View {@State var isSuper = false@State var isHuge = false@State var isRigid = false@State var isSmart = false@State var isImmortal = false@State var switchToggleStyle = truevar body: some View {NavigationStack {Text("by 大熊猫侯佩").font(.headline).foregroundColor(.gray)Toggle("Switch样式", isOn: $switchToggleStyle)Spacer()DisclosureGroup {VStack {Toggle("Super", isOn: $isSuper)Toggle("Huge", isOn: $isHuge)Toggle("Rigid", isOn: $isRigid)Toggle("Smart", isOn: $isSmart)Toggle("Immortal", isOn: $isImmortal)}.padding()} label: {Toggle("无敌的存在！", sources: [$isSuper,$isHuge,$isRigid,$isSmart,$isImmortal,], isOn: .self)}.enableToggleStyle(switchToggleStyle).navigationTitle("多选Toggle演示").tint(.pink)}.padding()}
}

效果如下：

是不是只用一行构造器代码就搞定了所有呢？棒棒哒！！！💯🚀

总结

在本篇博文中，我们在 SwiftUI 4.0 中仅通过一行代码即完成了 Toggle 多选/全选功能，超级简单，小伙伴们不想试一下吗？😎

感谢观赏，再会！