NavigationView关联视图中TextField键盘工具栏实现及约束冲突问题

最终目标 #

在键盘上方弹出工具栏，完成数字输入操作。

问题描述 #

主视图通过NavigationView实现多场景/视图跳转，在子视图MarketView的TextField中添加键盘工具栏时出现异常：控制台输出布局约束冲突日志，且弹出的工具栏出现额外的Done按钮。

简化代码 #

TextField所在视图（MarketView）代码： #

var body: some View {
    VStack {
        TextField("Quantity", value: $quantity, format: .number)
            .toolbar {
                ToolbarItem(placement: .keyboard) {
                    Button("Done") {
                        isEditing = false
                    }
                }
            }
    }
}

主视图代码： #

var body: some View {
    NavigationView {
        VStack {
            // 其他导航链接
            NavigationLink(destination: MarketView()) {
                Image(systemName: "cart.fill")
                Text("Market")
            }
        }
    }
}

控制台错误日志 #

[LayoutConstraints] 无法同时满足多个约束条件。
以下列表中至少有一个约束是你不需要的。尝试以下操作：
(1) 检查每个约束，找出不符合预期的项；
(2) 找到添加多余约束的代码并修复。
（注意：如果看到难以理解的NSAutoresizingMaskLayoutConstraints，请参考UIView属性translatesAutoresizingMaskIntoConstraints的文档）

(
    "<NSAutoresizingMaskLayoutConstraint:0x2809772a0 h=--& v=--& _UIToolbarContentView:0x101527930.width == 0   (active)>",
    "<NSLayoutConstraint:0x2809620d0 H:|-(20)-[_UIButtonBarStackView:0x1015283b0]   (active, names: '|':_UIToolbarContentView:0x101527930 )>",
    "<NSLayoutConstraint:0x280960af0 H:[_UIButtonBarStackView:0x1015283b0]-(20)-|   (active, names: '|':_UIToolbarContentView:0x101527930 )>",
    "<NSLayoutConstraint:0x280976c10 'UISV-canvas-connection' UILayoutGuide:0x2813e9420'UIViewLayoutMarginsGuide'.leading == _UITAMICAdaptorView:0x102918dd0.leading   (active)>",
    "<NSLayoutConstraint:0x280976c60 'UISV-canvas-connection' UILayoutGuide:0x2813e9420'UIViewLayoutMarginsGuide'.trailing == _UITAMICAdaptorView:0x102919310.trailing   (active)>",
    "<NSLayoutConstraint:0x280976cb0 'UISV-spacing' H:[_UITAMICAdaptorView:0x102918dd0]-(0)-[UIView:0x102919190]   (active)>",
    "<NSLayoutConstraint:0x280976d00 'UISV-spacing' H:[UIView:0x102919190]-(0)-[_UITAMICAdaptorView:0x102919310]   (active)>",
    "<NSLayoutConstraint:0x280960640 'UIView-leftMargin-guide-constraint' H:|-(0)-[UILayoutGuide:0x2813e9420'UIViewLayoutMarginsGuide'](LTR)   (active, names: '|':_UIButtonBarStackView:0x1015283b0 )>",
    "<NSLayoutConstraint:0x280961090 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x2813e9420'UIViewLayoutMarginsGuide']-(0)-|(LTR)   (active, names: '|':_UIButtonBarStackView:0x1015283b0 )>"
)

将尝试通过打破以下约束来恢复：
<NSLayoutConstraint:0x280976d00 'UISV-spacing' H:[UIView:0x102919190]-(0)-[_UITAMICAdaptorView:0x102919310]   (active)>

可以在UIViewAlertForUnsatisfiableConstraints处设置符号断点，在调试器中捕获该问题。UIView的UIConstraintBasedLayoutDebugging分类中的方法（在<UIKitCore/UIView.h>中列出）可能也会有帮助。

错误界面示例 #

• iPad端：
• iPhone端：

解决方案 #

问题根源是在NavigationView的子视图中直接给TextField添加toolbar时，系统会自动生成额外工具栏元素，同时引发布局约束冲突，可通过以下两种方式解决：

方法1：将toolbar移至视图根容器 #

把toolbar修饰符从TextField移到MarketView的根容器（如VStack）上，让系统合并工具栏元素，避免重复和约束冲突：

var body: some View {
    VStack {
        TextField("Quantity", value: $quantity, format: .number)
            .onTapGesture {
                isEditing = true
            }
    }
    .toolbar {
        ToolbarItem(placement: .keyboard) {
            Button("Done") {
                isEditing = false
                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
            }
        }
    }
}

方法2：自定义UIKit工具栏（兼容旧版本） #

若SwiftUI原生toolbar仍有问题，可通过UIViewRepresentable包装UIToolbar实现自定义：

struct KeyboardDoneToolbar: UIViewRepresentable {
    @Binding var isEditing: Bool
    
    func makeUIView(context: Context) -> UIToolbar {
        let toolbar = UIToolbar()
        toolbar.sizeToFit()
        let doneButton = UIBarButtonItem(title: "Done", style: .done, target: context.coordinator, action: #selector(Coordinator.doneTapped))
        toolbar.items = [UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil), doneButton]
        return toolbar
    }
    
    func updateUIView(_ uiView: UIToolbar, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        let parent: KeyboardDoneToolbar
        
        init(_ parent: KeyboardDoneToolbar) {
            self.parent = parent
        }
        
        @objc func doneTapped() {
            parent.isEditing = false
            UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
        }
    }
}

// 在MarketView中使用：
var body: some View {
    VStack {
        TextField("Quantity", value: $quantity, format: .number)
            .onTapGesture {
                isEditing = true
            }
            .introspectTextField { textField in
                textField.inputAccessoryView = KeyboardDoneToolbar(isEditing: $isEditing).makeUIView(context: .init())
            }
    }
}

注意：使用introspect需要导入Introspect库，可通过Swift Package Manager添加。

额外说明 #

• 重复Done按钮是因为NavigationView会自动为表单类视图添加默认键盘工具栏，自定义toolbar叠加后导致重复；
• 约束冲突源于子视图toolbar与NavigationView默认工具栏的布局约束冲突，将toolbar移至根容器后，系统会统一处理布局，消除冲突。

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