SwiftUI中TextEditor上方Rectangle鼠标光标异常：原因及修复

问题原因 #

SwiftUI中的Rectangle视图默认不参与鼠标命中测试，鼠标悬停、点击这类事件会直接“穿透”它，落到下层的TextEditor上。所以哪怕视觉上绿色矩形显示在最上层，鼠标悬停时触发的还是TextEditor的文本光标样式。

修复方法 #

要实现需求，需要完成两个核心操作：

• 让绿色矩形能够接收鼠标事件，阻止事件穿透到下层的TextEditor
• 给两个视图分别设置对应的光标样式

修改后的完整代码 #

struct Test: View {
    @State var text: String = ""
    
    var body: some View {
        ZStack {
            TextEditor(text: $text)
                .cursor(.text) // 显式设置文本选择光标
            
            Rectangle()
                .fill(Color.green)
                .padding()
                .allowsHitTesting(true) // 开启鼠标事件响应，阻断穿透
                .cursor(.arrow) // 设置默认箭头光标
        }.padding(50)
    }
}

代码说明 #

• .allowsHitTesting(true)：强制Rectangle参与鼠标命中测试，确保鼠标悬停在它上面时，事件不会传递给下层的TextEditor
• .cursor(.text)：给TextEditor明确指定文本选择光标，避免系统默认行为的不确定性
• .cursor(.arrow)：给Rectangle设置默认箭头光标，符合需求

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