如何将 .onHover 应用于 SwiftUI 中的单个元素答案

【问题标题】：How to apply .onHover to individual elements in SwiftUI如何将 .onHover 应用于 SwiftUI 中的单个元素
【发布时间】：2020-08-19 17:32:59
【问题描述】：

我正在尝试在鼠标悬停时为单个项目设置动画。我遇到的问题是，每个项目在鼠标悬停时都会被动画化，而不仅仅是那个特定的项目。这是我所拥有的：

struct ContentView : View {
    @State var hovered = false
    var body: some View {
        VStack(spacing: 90) {
            ForEach(0..<2) {_ in
                HStack(spacing: 90) {
                    ForEach(0..<4) {_ in
                        Circle().fill(Color.red).frame(width: 50, height: 50)
                            .scaleEffect(self.hovered ? 2.0 : 1.0)
                        .animation(.default)
                        .onHover { hover in
                                print("Mouse hover: \(hover)")
                            self.hovered.toggle()
                        }
                    }
                }
            }
        }
        .frame(minWidth:300,maxWidth:.infinity,minHeight:300,maxHeight:.infinity)
    }
}

【问题讨论】：

标签： swiftui onhover

【解决方案1】：

当前每个项目都被动画化了，因为它们都依赖hovered 来查看Circle 是否悬停在上面。为了解决这个问题，我们可以让每个圈子都有自己的hovered 状态。

struct CircleView: View {
    @State var hovered = false

    var body: some View {
        Circle().fill(Color.red).frame(width: 50, height: 50)
            .scaleEffect(self.hovered ? 2.0 : 1.0)
        .animation(.default)
        .onHover { hover in
                print("Mouse hover: \(hover)")
            self.hovered.toggle()
        }
    }
}

在ForEach 中，我们可以调用新的CircleView，其中每个Circle 都有自己的事实来源。

struct ContentView : View {
    var body: some View {
        VStack(spacing: 90) {
            ForEach(0..<2) { _ in
                HStack(spacing: 90) {
                    ForEach(0..<4) { _ in
                        CircleView()
                    }
                }
            }
        }
        .frame(minWidth:300,maxWidth:.infinity,minHeight:300,maxHeight:.infinity)
    }
}

【讨论】：

【解决方案2】：

它需要在每个视图基础上更改 onHover 视图，即。存储一些悬停视图的标识符。

这是可能的解决方案。使用 Xcode 11.4 测试。

struct TestOnHoverInList : View {
    @State var hovered: (Int, Int) = (-1, -1)
    var body: some View {
        VStack(spacing: 90) {
            ForEach(0..<2) {i in
                HStack(spacing: 90) {
                    ForEach(0..<4) {j in
                        Circle().fill(Color.red).frame(width: 50, height: 50)
                        .scaleEffect(self.hovered == (i,j) ? 2.0 : 1.0)
                        .animation(.default)
                        .onHover { hover in
                            print("Mouse hover: \(hover)")
                            if hover {
                                self.hovered = (i, j)    // << here !!
                            } else {
                                self.hovered = (-1, -1)  // reset
                            }
                        }
                    }
                }
            }
        }
        .frame(minWidth:300,maxWidth:.infinity,minHeight:300,maxHeight:.infinity)
    }
}

【讨论】：