iOS15下SwiftUI自定义时间Picker重叠导致部分无法滚动问题

API 探路者

2026-10-2

问题根因

iOS 15 对 SwiftUI 中 WheelPickerStyle 类型的 Picker 布局和手势响应逻辑做了底层调整：即使你给 Picker 设置了固定宽高的 frame 并调用了 clipped() 做视觉裁剪，Picker 内部的手势响应区域仍然会保留系统默认滚轮选择器的原生尺寸，导致多个并排摆放的 Picker 响应区域互相重叠，最终仅有最上层的 Picker 可以响应滑动操作。

修复方案

在每个 Picker 的修饰符链中，frame 设置之后增加两个修饰符即可解决：

.compositingGroup()：让视图的裁剪效果作用于整个视图层级，包括手势响应区域
.contentShape(Rectangle())：明确指定视图的响应区域为当前 frame 对应的矩形范围

你需要给时、分、秒、毫秒四个 Picker 都添加这两个修饰符，修改后的单个 Picker 示例如下：

Picker("", selection: $viewModel.hoursTime) {
    ForEach(0..<24){ hours in
        if(hours < 10){
            Text("  \(hours)").foregroundColor(textColor)
        }
        else{
            Text("\(hours)").foregroundColor(textColor)
        }
    }
}
.pickerStyle(WheelPickerStyle())
.frame(width: width, height: 40)
.clipped()
.labelsHidden()
.clipShape(Rectangle())
// 新增以下两行
.compositingGroup()
.contentShape(Rectangle())