SwiftUIで、画像やテキストなどのビューに「ぼかし効果」をつけることのできるのが今回紹介するblurモディファイア。
サンプルコードを交えて基本的な使い方を紹介する。
サンプルコード
今回はImageビューと、Textビューを用意し、それぞれにぼかし効果を付けていく例を紹介する。
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がリアルタイムで書きかわり、ビューにぼかしが適用される。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2021/02/image-33.png?resize=812%2C958&ssl=1)
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2021/02/image-34.png?resize=814%2C984&ssl=1)