跳转至
Structure

Gradient

A color gradient represented as an array of color stops, each having a parametric location value.

Declaration

@frozen struct Gradient : Equatable

Overview

Use this structure along with one of the gradient views to display a visual gradient. There are 3 types of gradients:

Those gradients are actual Views. This structure, on the other hand, is just the list of colors and spacings associated with a gradient.

See the example below for a simple gradient being passed to a LinearGradient view.

struct ExampleView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .fill(LinearGradient(
                    gradient: Gradient(colors: [.green, .blue, .purple]),
                    startPoint: .leading,
                    endPoint: .trailing))
            .padding()
    }
}
A view containing a rounded rectangle wit corner radius 10, padding, and a linear gradient fill; the linear gradient goes from green to blue to purple with a leading startPoint and trailing endPoint.

A gradient is made up of a list of Stops A stop contains a color along with the a value from 0 to 1 indicating where the color should be spaced.

Use the init(stops:) initializer to specify the array of Stops.

To quickly create a gradient with evenly spaced colors, use init(colors:).

Availability

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics


Initializer

init(colors:) Creates a gradient from an array of colors.

init(stops:) Creates a gradient from an array of color stops.


Structure

Stop One color stop in the gradient.


Type Method

==(a:b:) Returns a Boolean value indicating whether two values are equal.


Instance Property

stops The array of color stops.