前言

在 WWDC 23 中，SwiftUI 引入了一個(gè)名為 visualEffect 的新視圖修飾符。此修飾符允許我們通過訪問特定視圖的布局信息來附加一組可動(dòng)畫化的視覺效果。下面我們將學(xué)習(xí)如何在 SwiftUI 中使用新的 visualEffect 視圖修飾符。uAc28資訊網(wǎng)——每日最新資訊28at.com

介紹 visualEffect

讓我們從使用 visualEffect 視圖修飾符的最簡(jiǎn)單示例開始。uAc28資訊網(wǎng)——每日最新資訊28at.com

struct ContentView: View {    var body: some View {        Text("Hello World!")            .visualEffect { initial, geometry in                initial.offset(geometry.size)            }    }}

正如你在上面的示例中所看到的，我們定義了一個(gè)文本視圖并附加了 visualEffect 視圖修飾符。每當(dāng)你附加 visualEffect 視圖修飾符時(shí)，你應(yīng)該指定效果閉包。這是你應(yīng)用所有需要的效果的地方。uAc28資訊網(wǎng)——每日最新資訊28at.com

效果閉包為你提供了兩個(gè)參數(shù)。第一個(gè)是附加到視圖的效果集合的初始狀態(tài)。它是 EmptyVisualEffect 類型的實(shí)例。我們使用此實(shí)例來附加額外的效果。第二個(gè)參數(shù)是包含視圖的所有布局信息的 GeometryProxy 類型的實(shí)例，比如 frame、安全區(qū)域等。uAc28資訊網(wǎng)——每日最新資訊28at.com

什么是視覺效果？

視覺效果是可以改變視圖的視覺外觀但不影響其布局的任何東西。在 SwiftUI 框架的先前版本中，我們有視圖修飾符，如縮放、偏移、模糊、對(duì)比度、飽和度、不透明度、旋轉(zhuǎn)等。它們?nèi)慷际且曈X效果，并且現(xiàn)在符合 VisualEffect 協(xié)議。你可以在 visualEffect 閉包中使用其中任何一個(gè)。uAc28資訊網(wǎng)——每日最新資訊28at.com

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 閉包中使用它們，因?yàn)樗鼈冃薷牧艘晥D層次結(jié)構(gòu)的布局。uAc28資訊網(wǎng)——每日最新資訊28at.com

visualEffect 修飾符視覺效果

visualEffect 視圖修飾符是完成舊事物的新方法。我們可以使用舊視圖修飾符修改視圖的不透明度和偏移。如果你不需要布局信息，你可以繼續(xù)使用它們。新方法的唯一區(qū)別是我們通過從 GeometryProxy 提供的布局信息計(jì)算視圖的視覺效果的方式來限定視圖的視覺效果。uAc28資訊網(wǎng)——每日最新資訊28at.com

visualEffect 視圖修飾符支持可動(dòng)畫化的值。因此，你可以繼續(xù)使用它根據(jù)視圖在視圖層次結(jié)構(gòu)中的框架和邊界來動(dòng)畫化視圖的視覺外觀。uAc28資訊網(wǎng)——每日最新資訊28at.com

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 SwiftUIstruct 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 中打開并運(yùn)行，選擇合適的模擬器。請(qǐng)注意，由于視覺效果和動(dòng)畫效果，最好在模擬器上查看效果。uAc28資訊網(wǎng)——每日最新資訊28at.com

總結(jié)

本文章介紹了在 SwiftUI 中引入的新視圖修飾符 visualEffect。該修飾符允許我們通過訪問特定視圖的布局信息來附加一組可動(dòng)畫的視覺效果。給出了一些使用 visualEffect 的簡(jiǎn)單示例，包括如何使用效果閉包以及如何應(yīng)用一些常見的視覺效果（例如模糊、透明度、縮放）。uAc28資訊網(wǎng)——每日最新資訊28at.com

此外，還提到了 GeometryProxy 類型的使用，以及 visualEffect 對(duì)可動(dòng)畫值的支持，使得可以根據(jù)視圖的幀和邊界來動(dòng)態(tài)調(diào)整視覺外觀。uAc28資訊網(wǎng)——每日最新資訊28at.com

最后，指出了 visualEffect 修飾符在向后兼容性方面的注意事項(xiàng)，并建議在不需要布局信息的情況下繼續(xù)使用傳統(tǒng)的視圖修飾符。uAc28資訊網(wǎng)——每日最新資訊28at.com

uAc28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-55248-0.htmlSwiftUI 使用 visualEffect 視圖修飾符

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： SwiftUI 使用 visualEffect 視圖修飾符

下一篇： 深入了解Java 8 新特性：Optional類的實(shí)踐應(yīng)用