Instance Method インスタンスメソッド

toggleStyle(_:)

Sets the style for toggles in a view hierarchy.

Declaration 宣言

func toggleStyle<S>(_ style: S) -> some View where S : ToggleStyle

Return Value 戻り値

A view that uses the specified toggle style for itself and its child views.

Parameters パラメータ

style

The toggle style to set. Use one of the built-in values, like switch or button, or a custom style that you define by creating a type that conforms to the ToggleStyle protocol.

Discussion 議論

Use this modifier on a Toggle instance to set a style that defines the control’s appearance and behavior. For example, you can choose the switch style:


Toggle("Vibrate on Ring", isOn: $vibrateOnRing)
    .toggleStyle(.switch)

Built-in styles typically have a similar appearance across platforms, tailored to the platform’s overall style:

Platform

Appearance

iOS, iPadOS

A screenshot of the text Vibrate on Ring appearing to the left of a toggle switch that’s on. The toggle’s tint color is green. The toggle and its text appear in a rounded rectangle.

macOS

A screenshot of the text Vibrate on Ring appearing to the left of a toggle switch that’s on. The toggle’s tint color is blue. The toggle and its text appear on a neutral background.

Styling Toggles in a Hierarchy

You can set a style for all toggle instances within a view hierarchy by applying the style modifier to a container view. For example, you can apply the button style to an HStack:


HStack {
    Toggle(isOn: $isFlagged) {
        Label("Flag", systemImage: "flag.fill")
    }
    Toggle(isOn: $isMuted) {
        Label("Mute", systemImage: "speaker.slash.fill")
    }
}
.toggleStyle(.button)

The example above has the following appearance when isFlagged is true and isMuted is false:

Platform

Appearance

iOS, iPadOS

A screenshot of two buttons arranged horizontally. The first has the image of a flag and is active with a blue tint. The second has an image of a speaker with a line through it and is inactive with a neutral tint.

macOS

A screenshot of two buttons arranged horizontally. The first has the image of a flag and is active with a blue tint. The second has an image of a speaker with a line through it and is inactive with a neutral tint.

Automatic Styling

If you don’t set a style, SwiftUI assumes a value of automatic, which corresponds to a context-specific default. Specify the automatic style explicitly to override a container’s style and revert to the default:


HStack {
    Toggle(isOn: $isShuffling) {
        Label("Shuffle", systemImage: "shuffle")
    }
    Toggle(isOn: $isRepeating) {
        Label("Repeat", systemImage: "repeat")
    }


    Divider()


    Toggle("Enhance Sound", isOn: $isEnhanced)
        .toggleStyle(.automatic) // Revert to the default style.
}
.toggleStyle(.button) // Use button style for toggles in the stack.
.labelStyle(.iconOnly) // Omit the title from any labels.

The style that SwiftUI uses as the default depends on both the platform and the context. In macOS, the default in most contexts is a checkbox, while in iOS, the default toggle style is a switch:

Platform

Appearance

iOS, iPadOS

A screenshot of several horizontally arranged items: two buttons, a vertical divider line, the text Enhance sound, and a switch. The first button has two right facing arrows that cross over in the middle and is active with a blue tint. The second button has one right and one left facing arrow and is inactive with neutral tint. The switch is on and has a green tint.

macOS

A screenshot of several horizontally arranged items: two buttons, a vertical divider line, a checkbox, and the text Enhance sound. The first button has two right facing arrows that cross over in the middle and is active with a blue tint. The second button has one right and one left facing arrow and is inactive with a neutral tint. The check box is checked and has a blue tint.

For more information about how SwiftUI chooses a default toggle style, see the automatic style.