跳转至
Structure

ColorPicker

A view that lets the user choose a color.

Declaration

struct ColorPicker<Label> : View where Label : View

Overview

The color picker provides a color well that shows the currently selected color, and displays the larger system color picker that allows users to select a new color.

By default color picker supports colors with opacity; to disable opacity support, set the supportsOpacity parameter to false. In this mode the color picker won't show controls for adjusting the opacity of the selected color, and strips out opacity from any color set programmatically or selected from the user's system favorites.

In general, there are 3 types of color picker titles, and 2 binding types, for 6 initializers total.

Title types:

  1. String
  2. LocalizedStringKey
  3. View

Binding types:

  1. CGColor
  2. Color

You use ColorPicker by embedding it inside a view hierarchy and initializing it with a title string and a Binding to a Color:

struct ColorView: View {
    @State private var color = Color.red

    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .fill(color)
            .frame(width: 100, height: 100)

        ColorPicker("Choose a color! 🎨", selection: $color)
    }
}
A gif displaying a view with a 100 x 100 rounded rectangle with a fill derived from the state variable "color" and a ColorPicker titled "Choose a color! 🎨", whose selection input is bound to the state variable; the gif shows "Choose a color! 🎨" being clicked and the color picker menu sliding up where various colors are chosen and reflected in the rectangle.

Availability

iOS 14.0+

macOS 11.0+

Topics


Instance Property

body The content and behavior of the view.


Type Alias

Body The type of view representing the body of this view.


Initializer

init(_:selection:supportsOpacity:) Creates a color picker with a localized string key title and Color binding.

init(_:selection:supportsOpacity:) Creates a color picker with a string title and Color binding.

init(_:selection:supportsOpacity:) Creates a color picker with a localized string key title and a CGColor binding.

init(_:selection:supportsOpacity:) Creates a color picker with a string title and a CGColor binding.

init(selection:supportsOpacity:label:) Creates a color picker with a view title and Color binding.

init(selection:supportsOpacity:label:) Creates a color picker with a view title and CGColor binding.