SwiftUI 使用 visualEffect 視圖修飾符
前言
在 WWDC 23 中，SwiftUI 引入了一個名為 visualEffect 的新視圖修飾符。此修飾符允許我們通過訪問特定視圖的布局信息來附加一組可動畫化的視覺效果。下面我們將學習如何在 SwiftUI 中使用新的 visualEffect 視圖修飾符。
介紹 visualEffect
讓我們從使用 visualEffect 視圖修飾符的最簡單示例開始。
struct ContentView: View {
var body: some View {
Text("Hello World!")
.visualEffect { initial, geometry in
initial.offset(geometry.size)
}
}
}正如你在上面的示例中所看到的，我們定義了一個文本視圖并附加了 visualEffect 視圖修飾符。每當你附加 visualEffect 視圖修飾符時，你應該指定效果閉包。這是你應用所有需要的效果的地方。
效果閉包為你提供了兩個參數。第一個是附加到視圖的效果集合的初始狀態。它是 EmptyVisualEffect 類型的實例。我們使用此實例來附加額外的效果。第二個參數是包含視圖的所有布局信息的 GeometryProxy 類型的實例，比如 frame、安全區域等。
什么是視覺效果？
視覺效果是可以改變視圖的視覺外觀但不影響其布局的任何東西。在 SwiftUI 框架的先前版本中，我們有視圖修飾符，如縮放、偏移、模糊、對比度、飽和度、不透明度、旋轉等。它們全部都是視覺效果，并且現在符合 VisualEffect 協議。你可以在 visualEffect 閉包中使用其中任何一個。
struct ContentView: View {
var body: some View {
Text("Hello World!")
.visualEffect { initial, geometry in
initial
.blur(radius: 8)
.opacity(0.9)
.scaleEffect(.init(width: 2, height: 2))
}
}
}像 frame 和 padding 這樣的東西不是視覺效果，你不能在 visualEffect 閉包中使用它們，因為它們修改了視圖層次結構的布局。
visualEffect 修飾符視覺效果
visualEffect 視圖修飾符是完成舊事物的新方法。我們可以使用舊視圖修飾符修改視圖的不透明度和偏移。如果你不需要布局信息，你可以繼續使用它們。新方法的唯一區別是我們通過從 GeometryProxy 提供的布局信息計算視圖的視覺效果的方式來限定視圖的視覺效果。
visualEffect 視圖修飾符支持可動畫化的值。因此，你可以繼續使用它根據視圖在視圖層次結構中的框架和邊界來動畫化視圖的視覺外觀。
struct ContentView: View {
@State private var isScaled = false
var body: some View {
VStack {
Button("Scale") {
isScaled.toggle()
}
Text("Hello World!")
.visualEffect { initial, geometry in
initial.scaleEffect(
CGSize(
width: isScaled ? 2 : 1,
height: isScaled ? 2 : 1
)
)
}
.animation(.smooth, value: isScaled)
}
}
}完整的代碼
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello World!")
.visualEffect { initial, geometry in
initial.offset(geometry.size)
}
}
}
struct ContentViewWithEffects: View {
var body: some View {
Text("Hello World!")
.visualEffect { initial, geometry in
initial
.blur(radius: 8)
.opacity(0.9)
.scaleEffect(.init(width: 2, height: 2))
}
}
}
struct ContentViewWithAnimation: View {
@State private var isScaled = false
var body: some View {
VStack {
Button("Scale") {
isScaled.toggle()
}
Text("Hello World!")
.visualEffect { initial, geometry in
initial.scaleEffect(
CGSize(
width: isScaled ? 2 : 1,
height: isScaled ? 2 : 1
)
)
}
.animation(.smooth, value: isScaled)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
ContentViewWithEffects()
ContentViewWithAnimation()
}
}將上述代碼放入 Swift 文件中，然后在 Xcode 中打開并運行，選擇合適的模擬器。請注意，由于視覺效果和動畫效果，最好在模擬器上查看效果。
總結
本文章介紹了在 SwiftUI 中引入的新視圖修飾符 visualEffect。該修飾符允許我們通過訪問特定視圖的布局信息來附加一組可動畫的視覺效果。給出了一些使用 visualEffect 的簡單示例，包括如何使用效果閉包以及如何應用一些常見的視覺效果（例如模糊、透明度、縮放）。
此外，還提到了 GeometryProxy 類型的使用，以及 visualEffect 對可動畫值的支持，使得可以根據視圖的幀和邊界來動態調整視覺外觀。
最后，指出了 visualEffect 修飾符在向后兼容性方面的注意事項，并建議在不需要布局信息的情況下繼續使用傳統的視圖修飾符。
