SwiftUI 的 blur 模糊效果

SwiftUI 的 protocol View 宣告了 blur function，幫助我們方便地將 SwiftUI 的 UI 元件加上模糊效果。(Gaussian Blur）

func blur(radius: Length, opaque: Bool = false) -> Self.Modified<_BlurEffect>

blur(radius:opaque:) - View | Apple Developer Documentation

文字 blur

以彼得潘偶像戴佩妮創作的歌詞勢在必行為例。

VStack {
   Text("為愛付出瘋狂，為夢受一點傷")
   Text("為愛付出瘋狂，為夢受一點傷")
      .blur(radius: 2)
   Text("為愛付出瘋狂，為夢受一點傷")
      .blur(radius: 10)
}

圖片 blur

VStack {
   Image("peter")
   Image("peter")
      .blur(radius: 2)
   Image("peter")
      .blur(radius: 10)
}

opaque(不透明)調整

套用 blur 效果時，它的 opaque 預設為 false。我們可額外傳入參數 opaque 控制是否不透明。

VStack {
   Image("peter")
      .blur(radius: 10.0, opaque: false)
   Image("peter")
      .blur(radius: 10.0, opaque: true)
}

上面的圖 opaque 為 false，下面的圖 opaque 為 true