【SwiftUI】Viewの彩度を調整する（saturation）

Viewの彩度を調整するsaturationモディファイアの使い方を解説します。

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】12.0
【Swift】5.3
【iOS】14.0
【macOS】Catalina バージョン 10.15.6

.saturation(彩度値)

Viewの彩度（色の鮮やかさ）を設定するModifierです。
引数には彩度値（0.0-1.0）をDouble型で指定します。
0.0がモノクロ、1.0がオリジナル色となります。

スライダーで彩度値を0.0から1.0まで変更するサンプルです。

struct ContentView: View {

/// 彩度値（0.0 - 1.0）

@State private var amount = 0.0

var body: some View {

ZStack {

VStack(spacing: 0) {

/// 画像

Image("capibara")

.resizable()

.scaledToFit()

.frame(width: 300)

/// テキスト

Text("カピ通信")

.frame(width:300)

.background(

LinearGradient(

gradient: Gradient(colors: [.yellow, .pink, .blue, .green]),

startPoint: .leading,

endPoint:.trailing))

.font(.largeTitle)

}

.saturation(amount) // 彩度の設定

/// 彩度変更スライダ

VStack {

Spacer()

HStack {

Slider(value: $amount)

Text("\(amount, specifier: "%.2f")")

}

.padding()

}