iOS系统Tab键功能正常但触控无法选中SwiftUI TextField问题求助

问题根因 #

GeometryReader的子视图默认采用ZStack堆叠布局，你将ContactPicker与承载输入框的VStack平级放置，即使showPicker为false时ContactPicker处于不可见状态，它的视图层依然覆盖在整个VStack上方，拦截了所有触控点击事件。外接键盘的Tab键跳转是基于响应链的焦点遍历逻辑，不受视图层级遮挡影响，因此会出现Tab可跳转但触控无法选中输入框的现象。

解决方案 #

方案1：使用sheet承载联系人选择器（推荐）

这是SwiftUI弹出临时选择视图的标准实现方式，不会常驻在原有视图层级中，不会干扰原有视图的交互逻辑：

var body: some View {
    NavigationView {
        GeometryReader { geometry in
            VStack {
                TextField("Address Line 1", text: $addressLine1)
                    .customTextField()
                Spacer()
            }
        }
        .padding([.leading, .trailing], 10 )
        .navigationTitle("Recipient")
        .navigationBarItems(trailing:
                                HStack {
                                    Button(action: {
                                            self.showPicker.toggle()
                                    }, label: {
                                        Image(systemName: "magnifyingglass")
                                    })
                                }
        )
        // 将ContactPicker放到sheet中，仅showPicker为true时才加载到视图层级
        .sheet(isPresented: $showPicker) {
            ContactPicker(showPicker: $showPicker, onSelectContact: {contact in
                firstName = contact.givenName
                lastName = contact.familyName
                if contact.postalAddresses.count > 0 {
                    if let addressString = (
                        ((contact.postalAddresses[0] as AnyObject).value(forKey: "labelValuePair")
                            as AnyObject).value(forKey: "value"))
                        as? CNPostalAddress {
                        addressLine1 = "\(addressString.street)"
                    }
                }
                self.showPicker.toggle()
            }, onCancel: nil)
        }
    }
}

方案2：禁用隐藏状态下ContactPicker的点击响应

如果你必须保留当前的视图层级写法，直接给ContactPicker添加命中测试禁用修饰符即可，隐藏状态下会自动透传点击事件到下层视图：

ContactPicker(showPicker: $showPicker, onSelectContact: {contact in
    // 原有选择逻辑保持不变
}, onCancel: nil)
.allowsHitTesting(showPicker)

该方案下只有当showPicker为true时，ContactPicker才会响应触控事件，不会影响下层输入框的点击操作。

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