跳转至
Protocol

ToggleStyle

Structs conforming to the this protocol can customize the styles for Toggle views.

Declaration

protocol ToggleStyle

Overview

ToggleStyle allows for easy customization of a toggle view. In order to customize the style, simply create a new type conforming to this protocol that returns the custom view in the makeBody(configuration:) function. Note that while the ToggleStyle protocol takes care of most the implementation, the conforming type must still toggle the isOn property.

To configure the current toggle style for a view hierarchy, use the toggleStyle(_:) modifier.

For example, to make a custom toggle style which conforms to this protocol:

struct CustomRectangleToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.label
            Rectangle()
                .frame(width: 75, height: 30)
                .overlay(
                    Circle()
                        .foregroundColor(configuration.isOn ? Color.green : Color.red)
                        .padding(.all, 3)
                        .offset(x: configuration.isOn ? 20 : -20, y: 0)
                        .animation(Animation.linear(duration: 0.1))
                )
                .onTapGesture {
                    configuration.isOn.toggle()
                }
        }
    }
}
You can then apply this ToggleStyle to a Toggle using toggleStyle(_:):

struct ExampleView: View {
    @State private var toggleStatus: Bool = false

    var body: some View {
        Toggle(isOn: $toggleStatus) {
            Text("Active")
        }
        .padding(50)
        .toggleStyle(CustomRectangleToggleStyle())
    }
}
A gif displaying a toggle in the center of the screen with a label that reads "Active" and a custom style toggle that renders as a black rectangle with a red dot on its left when switched to off and a green dot on its right when switched to on.

Availability

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics


Instance Method

makeBody(configuration:) Creates a view that represents the body of a toggle.


Type Alias

Configuration The properties of a toggle instance.


Associated Type

Body A view that represents the appearance and interaction of a toggle.