SwiftUI hoverEffect() 修饰符的使用

9 min read

SwiftUI 的 hoverEffect() 修饰符可以在鼠标指针悬停在视图上时应用动画效果。这个修饰符可用于 Button、Text、Image 等视图中。

在使用 hoverEffect() 修饰符时，需要先将其导入：

import SwiftUI

然后可以将其应用于需要添加悬停效果的视图中，例如：

Button("Button with hover effect") {
    // Button action
}
.hoverEffect(.lift)

可以根据需要设置不同的效果类型，包括：

  • .automatic：根据系统设置自动选择悬停效果
  • .lift：向上提升视图
  • .highlight：高亮视图
  • .outline：显示视图轮廓

例如，将 hoverEffect() 修饰符应用于一张图片，如下所示：

Image(systemName: "bolt.circle")
    .resizable()
    .frame(width: 100, height: 100)
    .hoverEffect(.highlight)

通过悬停在图片上，可以看到高亮效果。

需要注意的是，hoverEffect() 修饰符只对 macOS 11.0 及以上版本有效，对 iOS 和 iPadOS 没有效果。