SwiftUI中clipped()修饰符不生效 滚轮选择器交互热区未裁剪

双Picker同行实现问题截图

需求与问题现象 #

需求为将两个滚轮样式的Picker控件放置在同一行，参考公开的SwiftUI多组件Picker实现方案编写代码后出现交互异常：

• clipped()修饰符仅裁剪了控件超出布局范围的视觉显示内容
• 控件的滑动、点击可交互热区没有同步被裁剪，和未添加clipped()时的响应范围完全一致，两个Picker热区重叠，操作时容易出现误触
  运行环境信息：
• IDE：Swift Playgrounds v4.1
• 设备：iPad（第9代）
• 系统版本：iPadOS 15.5 (19F77)

原始实现代码 #

import SwiftUI

struct Adding: View {
// 自定义变量声明
var body: some View {
        GeometryReader { geometry in
                Form{ 
                // 其他业务代码
                     () {
            Toggle(isOn: $time) {
                Text("Set a remind time")
            }
            if (time){
                HStack(spacing:0){
                    Picker("", selection: $minutes) {
                        ForEach(min, id: \.self) {
                            Text("\($0)").tag($0)
                        }
                    }.pickerStyle(WheelPickerStyle())
                        .labelsHidden()
                        .frame(width: geometry.size.width/2)
                        .clipped(antialiased: false)
                    Picker("", selection: $hours) {
                        ForEach(hr, id: \.self) {
                            Text("\($0)").tag($0)
                        }
                    }.pickerStyle(WheelPickerStyle())
                        .labelsHidden()
                        .frame(width: geometry.size.width/2)
                        .clipped()
                }
            }
            }
        }
    }
}

clipped()的设计作用仅为裁剪视图超出frame边界的视觉绘制内容，不会修改视图的命中测试（交互响应）范围，这是SwiftUI的默认行为逻辑。
在iPadOS 15系统中，WheelPickerStyle样式的Picker会默认占据父容器提供的全部可用宽度，代码中通过.frame(width:)仅约束了视图的布局宽度，clipped()仅处理了视觉溢出，Picker实际的交互响应区域仍为整行宽度，因此会出现热区重叠的问题。

在每个Picker的修饰符链中添加.compositingGroup()，该修饰符会强制SwiftUI将视图的渲染、命中测试范围严格限制在设置的frame边界内，即可将两个Picker的交互区域分别约束在半行宽度范围内，彻底解决热区重叠误触的问题。
修正后的核心代码段：

if time {
    HStack(spacing: 0) {
        Picker("", selection: $minutes) {
            ForEach(min, id: \.self) {
                Text("\($0)").tag($0)
            }
        }
        .pickerStyle(WheelPickerStyle())
        .labelsHidden()
        .frame(width: geometry.size.width / 2)
        .clipped()
        .compositingGroup()
        
        Picker("", selection: $hours) {
            ForEach(hr, id: \.self) {
                Text("\($0)").tag($0)
            }
        }
        .pickerStyle(WheelPickerStyle())
        .labelsHidden()
        .frame(width: geometry.size.width / 2)
        .clipped()
        .compositingGroup()
    }
}

如果添加后仍存在偶发的热区溢出问题，可以给每个Picker额外追加.contentShape(Rectangle())修饰符，强制系统按照矩形frame边界计算命中测试范围，完全消除交互串位问题。

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