SwiftUI - 模糊效果

SwiftUI 中的模糊效果會對使用者介面中指定的檢視、背景或影像應用模糊濾鏡。它通常用於增強視覺體驗，建立深度感，突出指定的元件或改善應用程式的使用者體驗。

SwiftUI 支援高斯模糊濾鏡，這是一種使用稱為高斯函式的數學函式的模糊型別濾鏡。它透過對給定半徑內的畫素進行平均來平滑影像，從而建立模糊效果。在 SwiftUI 中，我們可以透過以下方式實現模糊效果：

• blur() 修飾符
• 材質型別

blur() 修飾符

SwiftUI 提供了一個名為 blur() 的內建修飾符來實現模糊效果。此修飾符允許我們立即向任何檢視新增自定義高斯模糊效果。它通常用於模糊背景以增強前景元件。

語法

以下是語法：

func blur(radius: CGFloat, opaque: Bool = false)->some View

引數

此修飾符采用以下引數：

• radius: 表示模糊的徑向大小。
• opaque: 如果此引數的值為 true，則允許建立不透明模糊。否則，只允許透明。這是一個可選引數。

示例

以下 SwiftUI 程式用於模糊影像檢視。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Text("Original Image:").font(.largeTitle)
         Image("wallpaper").resizable()
            .frame(width: 300, height: 300)
         Text("Blurred Image:").font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .frame(width: 300, height: 300)
            .blur(radius: 4.5)
      }
   }
}

#Preview {
   ContentView()
}

輸出

材質型別

除了 blur() 修飾符之外，SwiftUI 還為我們提供了另一種建立模糊效果的方法，即材質型別。材質型別是具有不同半透明效果級別的預定義模糊效果的集合。使用這些，我們可以獲得深度感。

它們允許我們模糊背景而不影響前景元素。它們不是檢視，但它們會在檢視及其背景之間建立一個半透明層。它們在 Human Interface Guidelines 中定義。材質型別通常與 background() 或 overlay() 修飾符一起使用。

SwiftUI 支援以下型別的材質型別：

• .regularMaterial: 用於應用常規材質效果。
• .thinMaterial: 用於應用較輕的材質效果。
• .ultraThinMaterial: 用於應用最輕的材質效果。
• .thickMaterial: 用於應用較厚的材質效果。
• .ultraThickMaterial: 用於應用最厚的材質效果。
• .bar: 用於為條形和工具欄應用合適的材質效果。

語法

以下是語法：

.backgound(.thinMaterial)

示例

以下 SwiftUI 程式用於使用材質型別模糊當前檢視。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Rectangle().fill(.mint)
         VStack{
            Text("Thin Material")
            Rectangle()
               .frame(width: 250, height: 100)
               .background(.thinMaterial)
            Text("Thick Material")
            Rectangle()
               .frame(width: 250, height: 100)
               .background(.thickMaterial)
            
            Text("Ultra Thin Material")
            Rectangle()
               .frame(width: 250, height: 100)
               .background(.ultraThinMaterial)
            
            Text("Thick Material")
            Rectangle()
               .frame(width: 250, height: 100)
               .background(.ultraThickMaterial)
            
            Text("Regular Material")
            Rectangle()
               .frame(width: 250, height: 100)
               .background(.regularMaterial)
         }
      }      
   }
}
#Preview {
   ContentView()
}

輸出