为何为SwiftUI的List添加.shadow修饰符会导致.onMove失效？

问题背景 #

运行环境：macOS 11.7.2
相关SwiftUI代码：

struct ContentView: View {
@State private var users = ["Paul", "Taylor", "Adele"]

var body: some View {
    List {
        ForEach(users, id: \.self) { user in
            Text(user)
        }
        .onMove { a, b in
            print(a,b)
        }
    }
    .frame(width: 200,height: 200)
    .background(Color.white)
    .cornerRadius(10)
    .position(x: 500, y:300)
    //.shadow(color: Color.black.opacity(0.2), radius: 10)
}
}

现象：注释掉.shadow修饰符时，.onMove闭包能正常执行；启用该修饰符后，.onMove完全失效。

需要明确三个问题：

• 该现象产生的原因是什么？
• 如何修复？
• .shadow修饰符是如何影响.onMove的？

问题分析与修复 #

原因 #

在macOS 11的SwiftUI版本里，.shadow修饰符会改变视图的命中测试区域。给List加.shadow后，阴影会扩展整个视图的可交互边界，但这一版本的SwiftUI存在事件传递bug——拖拽排序的触摸事件被阴影对应的视图拦截，没法传到List内部的.onMove处理逻辑里。

修复方法 #

有两种可行的修复方式：

1. 将阴影移到背景层内部：让阴影属于白色背景而非List容器，这样不会干扰List的事件传递：

struct ContentView: View {
@State private var users = ["Paul", "Taylor", "Adele"]

var body: some View {
    List {
        ForEach(users, id: \.self) { user in
            Text(user)
        }
        .onMove { a, b in
            print(a,b)
        }
    }
    .frame(width: 200,height: 200)
    .background(
        Color.white
            .cornerRadius(10)
            .shadow(color: Color.black.opacity(0.2), radius: 10)
    )
    .position(x: 500, y:300)
}
}

2. 强制指定命中测试区域：给List添加.contentShape(Rectangle())，强制把List的命中测试区域设为原始边界，确保事件能正确传到内部：

struct ContentView: View {
@State private var users = ["Paul", "Taylor", "Adele"]

var body: some View {
    List {
        ForEach(users, id: \.self) { user in
            Text(user)
        }
        .onMove { a, b in
            print(a,b)
        }
    }
    .frame(width: 200,height: 200)
    .background(Color.white)
    .cornerRadius(10)
    .shadow(color: Color.black.opacity(0.2), radius: 10)
    .position(x: 500, y:300)
    .contentShape(Rectangle())
}
}

.shadow对.onMove的影响机制 #

SwiftUI里的修饰符会构建新的视图层级，.shadow本质是在原视图下方添加一个阴影形状的视图，同时扩展了整个视图组合的外部边界。在macOS 11的SwiftUI实现中，这个扩展的边界会干扰List的拖拽事件检测——用户拖拽列表项时，触摸事件先被阴影所在的外层视图捕获，但这个外层视图没有绑定.onMove的处理逻辑，导致事件没法向下传递到List内部的可拖拽元素，最终.onMove闭包就触发不了。

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