SwiftUI之深入解析如何使用visualEffect视图修饰符

一、visualEffect 简介

  • 在 WWDC 23 中,SwiftUI 引入了一个名为 visualEffect 的新视图修饰符,此修饰符允许通过访问特定视图的布局信息来附加一组可动画化的视觉效果。那么,如何在 SwiftUI 中使用新的 visualEffect 视图修饰符呢?
  • 首先看一下,visualEffect 视图修饰符的最简单示例:
rust 复制代码
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 闭包中使用其中任何一个。
rust 复制代码
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 视图修饰符支持可动画化的值,因此可以继续使用它根据视图在视图层次结构中的框架和边界来动画化视图的视觉外观。
rust 复制代码
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)
        }
    }
}

四、完整示例

  • 将如下的代码放入 Swift 文件中,然后在 Xcode 中打开并运行,选择合适的模拟器。请注意,由于视觉效果和动画效果,最好在模拟器上查看效果。
rust 复制代码
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()
    }
}
相关推荐
东坡肘子3 小时前
肘子的 Swift 周报 #063|异种肾脏移植取得突破
swiftui·swift·apple
恋猫de小郭16 小时前
什么?Flutter 可能会被 SwiftUI/ArkUI 化?全新的 Flutter Roadmap
flutter·ios·swiftui
靴子学长2 天前
iOS + watchOS Tourism App(含源码可简单复现)
mysql·ios·swiftui
hxx2218 天前
iOS swift开发系列--如何给swiftui内容视图添加背景图片显示
ios·swiftui·swift
胖虎18 天前
SwiftUI - (十九)组合视图
ios·swiftui·swift·组合视图
davidson14719 天前
Xcode
ios·swiftui·xcode·swift·apple
大熊猫侯佩10 天前
苹果开发者入门:修复 SwiftUI 中“跑偏的”动画(下)
swiftui·动画·animation·transition·转场·显式隐式动画·布局坐标
_rufeng_15 天前
SwiftUI入门篇
ios·swiftui·swift
大熊猫侯佩17 天前
SwiftUI 列表(或 Form)子项中的 Picker 引起导航无法跳转的原因及解决
list·swiftui·form·列表·navigation·导航·picker
袁代码1 个月前
SwiftUI开发教程系列 - 第十二章:本地化与多语言支持
开发语言·前端·ios·swiftui·swift·ios开发