[SwiftUI]四角形(Rectangle, RoundedRectangle)をグラデーション(gradient)にするには？

どうも、ちょげ(@chogetarou)です。

RectangleやRoundedRectangleなどの四角形の色をグラデーションにする方法を紹介します。

方法
使用例

方法

四角形をグラデーションにするには、fill修飾子を使います。

まず、RectangleやRoundedRectangleにfill修飾子を付与します。

そして、fill修飾子の引数にグラデーション（LinearGradient, RadialGradient, AngularGradientなど）を指定します。。

Rectangle()
    .fill(グラデーションを指定)

引数にグラデーションを指定したfille修飾子をRectangleやRoundedrectangleに付与することで、四角形をグラデーションにすることが出来ます。

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(
                    LinearGradient(
                        gradient: Gradient(colors: [.blue, .green]),
                        startPoint: .leading,
                        endPoint: .trailing
                    )
                )
                .frame(width: 200, height: 200)
            
            Rectangle()
                .fill(
                    RadialGradient(
                        gradient: Gradient(colors: [.green, .yellow, .red]),
                        center: .center,
                        startRadius: 0,
                        endRadius: 100
                    )
                )
                .frame(width: 200, height: 200)
                .padding()
            
            Rectangle()
                .fill(
                    AngularGradient(
                        gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]),
                        center: .center,
                        startAngle: .zero,
                        endAngle: .degrees(360)
                    )
                )
                .frame(width: 200, height: 200)
        }
    }
}