如何限制SwiftUI Form中Picker的可点击区域仅为其可见文本范围

你之前使用的.clipped()和.compositingGroup()仅能实现视觉层面的裁剪，不会修改控件的点击响应范围。Form中的列表行默认会将内部Picker的响应区域自动扩展到整行宽度，所以会出现整行点击都能触发Picker的问题。

可以通过以下两种方法解决：

方案1：拦截整行无效点击 #

给HStack添加空点击手势，吃掉非Picker区域的点击事件，仅保留Picker本身的点击响应：

import SwiftUI

struct ContentView: View {
    @State var rate: String = ""
    @State var units = ["mL/day","mL/hour"]
    @State var unit: Int = 0
    var body: some View {
        NavigationView{
            Form{
                HStack{
                    Text("Rate")
                    TextField("0", text: $rate)
                    Picker(selection: $unit, label: Text(""), content: {
                        ForEach(0..<units.count, content: { unit in
                            Text(units[unit])
                        })
                    })
                    .frame(width: 100.0)
                }
                .onTapGesture {} // 新增这行即可
            }
        }
    }
}

方案2：显式指定Picker的响应区域 #

给Picker添加.contentShape(Rectangle())修饰符，明确声明只有Picker的可见矩形区域响应点击：

Picker(selection: $unit, label: Text(""), content: {
    ForEach(0..<units.count, content: { unit in
        Text(units[unit])
    })
})
.frame(width: 100.0)
.contentShape(Rectangle()) // 新增这行即可

两种方案任选其一即可实现仅点击Picker可见文本区域才触发交互的需求。

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