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()
}

输出