Toggle in SwiftUI

Toggle也是经常在开发中使用到的一个组件，比如我们在app中设定了黑白模式，开就是黑模式，关就是白模式。那么我们就可以使用Toggle组件来完成切换，非常简单。

Toggle(toggleIsOn ? "White" : "Dark", isOn: $toggleIsOn)

非常简单，快速，只需上面代码就可以实现截图中的效果

toggleStyle

它是Toggle内置的样式，总共有两种形态。

1. switch
2. button

Swtich的效果，其实默认效果就是Switch

Toggle("Enhance Sound", isOn: $toggleIsOn)
                .toggleStyle(.switch)

Button的效果

未点击时就如一个没有背景色的Text，点击后就如一个Button一样

Toggle("Enhance Sound", isOn: $toggleIsOn)
                .toggleStyle(.button)

修改颜色

我们可以使用 SwitchToggleStyle(tint: .purple) 来修改Toggle的颜色

Toggle(isOn: $toggleIsOn, label: {
                Text("Change statue")
            })
            .toggleStyle(SwitchToggleStyle(tint: .purple))

更多样式

struct ToggleSample: View {
    @State var toggleIsOn: Bool = false
    @State var isShuffling: Bool = false
    @State var isRepeating: Bool = false
    @State var isEnhanced: Bool = false
    
    var body: some View {
        VStack {
            
//            Toggle("Enhance Sound", isOn: $toggleIsOn)
//                .toggleStyle(.button)

            
//            Toggle(toggleIsOn ? "White" : "Dark", isOn: $toggleIsOn)
//            HStack {
//                Text("Status:")
//                Text(toggleIsOn ? "Online" : "OffLine")
//            }
//            .font(.title)

            Toggle(isOn: $toggleIsOn, label: {
                Text("Change statue")
            })
            .toggleStyle(SwitchToggleStyle(tint: .purple))

            Toggle(isOn: $isShuffling) {
                Label("Shuffle", systemImage: "shuffle")
            }

            Toggle(isOn: $isRepeating) {
                Label("Repeat", systemImage: "repeat")
            }

            Toggle("Enhance Sound", isOn: $isEnhanced)
                .toggleStyle(.button)
                .padding()
        }
        .padding(.horizontal, 100)
    }
}

上述多给出了一个示例，可以使用图片和文字来共同定义一个Toggle的样式

以上就是基本的Toggle的使用。

大家有什么看法呢？欢迎留言讨论。
公众号：RobotPBQ