SwiftUI - 悬停效果

---

---

SwiftUI 中的悬停效果会在用户将鼠标指针或手指（在触摸屏上）移动到 UI 组件（例如按钮、链接、图像、文本、选项卡等）上时突出显示该视图。

这是最常用的效果，通过向用户解释哪些 UI 组件是可点击的来增强用户体验。悬停效果包括各种视觉变化，例如突出显示组件、提升组件等。

最初它是在 macOS、iOS 和 iPadOS 上引入的，现在它适用于所有 Apple 平台，例如 tvOS、watchOS 和 visionOS。在 SwiftUI 中，我们可以使用以下任何修饰符来应用悬停：

• hoverEffect()
• defaultHoverEffect()
• onHover()

SwiftUI 中的 hoverEffect() 修饰符

SwiftUI 支持一个预定义的悬停修饰符 hoverEffect()。hoverEffect() 修饰符用于在给定的组件或视图上应用悬停效果。它可以轻松地与任何视图或组件一起使用。它支持三种类型的效果：自动、突出显示和提升。

语法

以下是语法：

func hoverEffect(_effect:HoverEffect) -> some View

此修饰符只接受一个参数，即 effect。它表示将应用于指定视图的效果。它可以具有以下值之一：

• .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

此修饰符只接受一个参数，即 effect。它表示将应用于指定视图及其组件的默认效果。此参数的值可以是 .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

此修饰符只接受一个参数，即 action。它表示每当指针移入或移出给定视图的框架时我们想要执行的操作。每当指针进入给定视图的框架时，此 action 闭包将传递 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()
}

输出