偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

SwiftUI 使用 visualEffect 視圖修飾符

開發(fā) 前端
本文章介紹了在 SwiftUI 中引入的新視圖修飾符 visualEffect?。該修飾符允許我們通過訪問特定視圖的布局信息來附加一組可動畫的視覺效果。給出了一些使用 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 視圖修飾符時,你應該指定效果閉包。這是你應用所有需要的效果的地方。

效果閉包為你提供了兩個參數。第一個是附加到視圖的效果集合的初始狀態(tài)。它是 EmptyVisualEffect 類型的實例。我們使用此實例來附加額外的效果。第二個參數是包含視圖的所有布局信息的 GeometryProxy 類型的實例,比如 frame、安全區(qū)域等。

什么是視覺效果?

視覺效果是可以改變視圖的視覺外觀但不影響其布局的任何東西。在 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 視圖修飾符是完成舊事物的新方法。我們可以使用舊視圖修飾符修改視圖的不透明度和偏移。如果你不需要布局信息,你可以繼續(xù)使用它們。新方法的唯一區(qū)別是我們通過從 GeometryProxy 提供的布局信息計算視圖的視覺效果的方式來限定視圖的視覺效果。

visualEffect 視圖修飾符支持可動畫化的值。因此,你可以繼續(xù)使用它根據視圖在視圖層次結構中的框架和邊界來動畫化視圖的視覺外觀。

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 對可動畫值的支持,使得可以根據視圖的幀和邊界來動態(tài)調整視覺外觀。

最后,指出了 visualEffect 修飾符在向后兼容性方面的注意事項,并建議在不需要布局信息的情況下繼續(xù)使用傳統(tǒng)的視圖修飾符。

責任編輯:武曉燕 來源: Swift社區(qū)
相關推薦

2009-08-24 16:49:39

C#修飾符

2021-08-02 12:33:26

Swift修飾符視圖

2009-08-27 11:04:08

C# extern修飾

2009-08-27 13:06:13

C# new修飾符

2009-09-02 17:14:28

C#修飾符

2009-08-21 13:58:06

C# virtual修

2009-08-27 11:12:03

C# abstract

2015-08-18 09:25:11

Java修飾符關鍵詞

2009-08-27 11:16:40

C# sealed修飾

2009-09-04 11:06:40

C#訪問修飾符

2009-09-02 17:04:35

C# Extern修飾

2010-01-11 18:46:15

VB.NET修飾符

2009-06-12 14:46:05

static修飾符Java教程

2011-06-28 09:29:11

C#修飾符

2009-06-19 10:51:39

Scalapackage訪問修飾符

2009-06-12 13:37:47

訪問權限修飾符Java教程

2011-06-02 14:51:07

JAVA修飾符

2009-09-16 12:29:27

PHP正則表達式正則表達式修飾符

2009-07-22 08:45:35

Scala超類構造器override修飾符

2023-05-05 07:34:48

事件修飾符Vue應用
點贊
收藏

51CTO技術棧公眾號