Viewの彩度を調整するsaturationモディファイアの使い方を解説します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】12.0
【Swift】5.3
【iOS】14.0
【macOS】Catalina バージョン 10.15.6
【Swift】5.3
【iOS】14.0
【macOS】Catalina バージョン 10.15.6
基本的な使い方
1 2 3 |
.saturation(彩度値) |
Viewの彩度(色の鮮やかさ)を設定するModifierです。
引数には彩度値(0.0-1.0)をDouble型で指定します。
0.0がモノクロ、1.0がオリジナル色となります。
使用例
スライダーで彩度値を0.0から1.0まで変更するサンプルです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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() } } } } |
合わせて読みたい記事
【SwiftUI】Viewにぼかし効果をつける(blur)
Viewにぼかし効果をつける.blur()について解説します。