SwiftUI - 悬停效果
当用户移动鼠标指针或将手指(在触摸屏中)放在 UI 组件(如按钮、链接、图像、文本、选项卡等)上时，SwiftUI 中的悬停效果会突出显示视图。
这是最常用的效果，通过向用户解释哪个 UI 组件是可点击的来增强用户体验。悬停效果包括各种视觉变化，例如突出显示组件、提升组件等。
最初它是为 macOS、iOs 和 iPadOS 引入的，现在它可用于 Apple 的所有平台，例如 tvOS、watchOS、visionOS。在 SwiftUI 中，我们可以使用以下任何修饰符应用悬停 −
- hoverEffect()
- defaultHoverEffect()
- onHover()
SwiftUI 中的 hoverEffect() 修饰符
SwiftUI 支持预定义的悬停修饰符，即 hoverEffect()。hoverEffect() 修饰符用于在给定的组件或视图上应用悬停效果。它可以轻松地与任何视图或组件配合使用。它支持三种类型的效果:自动、突出显示和提升。
语法
以下是语法 −
func hoverEffect(_effect:HoverEffect) -> some View
此修饰符仅接受一个参数，即效果。它表示将应用于指定视图的效果。它可以是以下值中的任意一个值 −
- .automatic:这是默认效果。它会尝试自动确定悬停效果。
- .highlight:它将指针变形为视图背面的盘子，并显示指示视图位置的光源。
- .lift:每当指针放在视图上时，它都会用阴影放大视图。
示例
以下 SwiftUI 程序用于在给定视图上应用悬停效果。
import SwiftUI
struct ContentView: View {
var body: some View {
HStack{
Text("TAP ME")
.font(.headline)
.foregroundStyle(.green)
.hoverEffect(.lift)
.onTapGesture {
print("BOOM!")
}
}
}
}
#Preview {
ContentView()
}
输出
SwiftUI 中的 defaultHoverEffect() 修饰符
defaultHoverEffect() 修饰符用于对给定视图内的所有组件应用默认悬停效果。
语法
以下是语法 −
fund defaultHoverEffect(_effect:HoverEffect) -> some View
此修饰符仅接受一个参数，即效果。它表示将应用于指定视图及其组件的默认效果。该参数的值可以是.automatic、.lift或.highlight。该修饰符的默认值为.automatic。
示例
以下SwiftUI程序用于在给定的视图上应用悬停效果。
import SwiftUI
struct ContentView: View {
var body: some View {
HStack{
RoundedRectangle(cornerRadius: 5)
.fill(.mint)
.frame(width: 150, height: 100)
.overlay(
Text("Click").font(.largeTitle))
}.defaultHoverEffect(.automatic)
}
}
#Preview {
ContentView()
}
输出
SwiftUI 中的 onHover() 修饰符
onHover() 修饰符用于插入一个操作，该操作将在用户将鼠标指针移到给定视图上方或移开时执行。
语法
以下是语法 −
fund onHover(perform action:@escaping(Bool)->Void) -> some View
此修饰符仅接受一个参数，即操作。它表示我们希望在指针移入或移出给定视图的框架时执行的操作。每当指针进入给定视图的框架时，此操作闭包将传递 true，否则将传递 false。
示例
以下 SwiftUI 程序用于在给定视图上应用悬停效果。
import SwiftUI
struct ContentView: View {
@State private var output = false
var body: some View {
Text("TutorialsPoint")
.foregroundStyle(output ? .orange : .purple)
.scaleEffect(output ? 2.3 : 1.5)
.onHover{x in output = x }
}
}
#Preview {
ContentView()
}
输出
