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

輸出