SwiftUIで、画像やテキストなどのビューに「ぼかし効果」をつけることのできるのが今回紹介するblurモディファイア。

サンプルコードを交えて基本的な使い方を紹介する。

サンプルコード

今回はImageビューと、Textビューを用意し、それぞれにぼかし効果を付けていく例を紹介する。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
struct ContentView: View {
    @State var radius: CGFloat = 3.0
     
    var body: some View {
        VStack {
            Image("pasta")
                .resizable()
                .scaledToFit()
                .blur(radius: radius)
            Text("Pasta")
                .font(.largeTitle)
                .blur(radius: radius)
            VStack(alignment: .leading) {
                Text("ぼかし: \(radius)")
                Slider(value: $radius,
                   in: 0...20)
            }
        }
    }
}

まず、2行目でぼかしの半径を設定する状態変数を定義しておき、15行目のSliderビューに変数をバインドさせる。

こうすることでスライダーを動かした時に、9行目、12行目で設定したblurモディファイアに設定した状態変数radiusがリアルタイムで書きかわり、ビューにぼかしが適用される。