SwiftUI翻转List中子视图鼠标事件未触发问题求助

问题根源 #

直接对List及其子视图应用rotationEffect或scaleEffect进行翻转，会改变视图坐标系方向，导致SwiftUI的**命中测试（Hit Testing）**无法正确识别子视图的交互区域，最终使得点击、悬停等鼠标事件失效。List的复用容器机制会进一步放大这个问题，而LazyVStack因为事件传递逻辑更简单，所以不受影响，但性能无法匹配List的懒加载复用能力。

解决方案 #

方案1：避免视图翻转（推荐） #

通过调整数据源顺序+滚动定位的方式实现聊天UI的底部锚定效果，完全规避翻转带来的事件问题，同时保留List的性能优势：

import SwiftUI

struct ContentView: View {
    // 模拟消息数据源
    let messages = Array(0..<10)
    
    var body: some View {
        ScrollViewReader { proxy in
            List {
                // 反向遍历数据源，让最新消息默认出现在List底部
                ForEach(messages.reversed(), id: \.self) { messageId in
                    Text("abcd \(messageId)")
                        .id(messageId)
                        .onHover { isHovering in print("hover \(messageId): \(isHovering)") }
                        .onTapGesture { print("tap \(messageId)") }
                }
            }
            .onAppear {
                // 初始滚动到最新消息（对应原数组最后一个元素）
                if let latestMessageId = messages.last {
                    proxy.scrollTo(latestMessageId, anchor: .bottom)
                }
            }
        }
    }
}

优势

• 完全保留List的懒加载复用性能
• 所有鼠标事件正常触发
• 逻辑更符合SwiftUI的原生布局规则，后续维护成本低

方案2：修复翻转视图的命中测试 #

如果必须保留翻转实现，可以通过强制指定contentShape来修正命中测试区域：

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0..<10) { i in
                Text("abcd \(i)")
                    .onHover { hov in print("hover \(i): \(hov)") }
                    .onTapGesture { print("tap \(i)") }
                    // 强制将文本的命中测试区域设为矩形边界
                    .contentShape(Rectangle())
            }
            .rotationEffect(.radians(.pi))
            .scaleEffect(x: -1.0, y: 1.0, anchor: .center)
        }
        .rotationEffect(.radians(.pi))
        .scaleEffect(x: -1.0, y: 1.0, anchor: .center)
        // 给List容器也设置contentShape，确保父容器的事件传递正常
        .contentShape(Rectangle())
    }
}

原理

翻转操作会扭曲视图的几何边界，导致SwiftUI无法正确识别交互区域。contentShape(Rectangle())强制指定视图的命中测试区域为原始的矩形范围，忽略翻转带来的坐标系变化，从而让鼠标事件能被正确触发。

内容的提问来源于stack exchange，提问作者CryptoAlgorithm