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

概览

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

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

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

Let’s go！！！😉

代码实现

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

@State var switchToggleStyle = true

Toggle("Switch样式", isOn: $switchToggleStyle)

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

我们随便看其中一个：

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

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

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

extension View {
    @ViewBuilder func enableToggleStyle(_ isSwitch: Bool) -> some View {
        
        if isSwitch {
            self.toggleStyle(.switch)
        }else{
            self.toggleStyle(.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 = true
    

    var 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 多选/全选功能，超级简单，小伙伴们不想试一下吗？😎

感谢观赏，再会！