使用ToolbarItemGroup给键盘添加按钮时出现约束冲突问题

问题重现 #

在Xcode 15.3中，尝试通过ToolbarItemGroup给键盘添加右对齐的"Done"按钮时，控制台出现约束冲突警告——即使移除Spacer只保留居中按钮，警告依然存在。

代码示例：

import SwiftUI

struct FormView: View {

    @State private var text = ""
    @FocusState private var keyboardFocused: Bool

    var body: some View {
        VStack {
            Form {
                Section {
                    TextField("Add text here", text: $text)
                        .focused($keyboardFocused)
                }
            }
        }.toolbar {
            ToolbarItemGroup(placement: .keyboard) {
                Spacer()
                Button(action: {
                    keyboardFocused = false
                }, label: {
                    Text("Done")
                })
            }
        }
    }
}

#Preview {
    FormView()
}

控制台警告：

无法同时满足约束条件。可能以下列表中至少有一个约束并非您所需。请尝试：(1)检查每个约束，找出不符合预期的项；(2)找到添加多余约束的代码并修复。（注意：如果您看到无法理解的NSAutoresizingMaskLayoutConstraints，请参考UIView属性translatesAutoresizingMaskIntoConstraints的文档）(
"<NSAutoresizingMaskLayoutConstraint:0x282c9f8e0 h=--& v=--& _UIToolbarContentView:0x103e23ec0.width == 0 (active)>",
"<NSLayoutConstraint:0x282c8ba20 H:|-(16)-[_UIButtonBarStackView:0x103e242e0] (active, names:
'|':_UIToolbarContentView:0x103e23ec0 )>",
"<NSLayoutConstraint:0x282c8b9d0 H:[_UIButtonBarStackView:0x103e242e0]-(16)-| (active, names:
'|':_UIToolbarContentView:0x103e23ec0 )>" )

系统将尝试通过打破以下约束来恢复：
<NSLayoutConstraint:0x282c8b9d0
H:[_UIButtonBarStackView:0x103e242e0]-(16)-| (active, names:
'|':_UIToolbarContentView:0x103e23ec0 )>

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

问题原因 #

这是Xcode 15.3中SwiftUI与UIKit底层交互的布局bug：_UIToolbarContentView被错误地设置了宽度为0的约束，同时按钮栈视图又被要求左右各留16pt边距，导致约束矛盾。你的代码操作本身没有错误。

解决方案 #

方案1：改用ToolbarItem（推荐）

单个按钮无需使用ToolbarItemGroup，直接用ToolbarItem配合frame实现右对齐，避免组布局带来的约束问题：

.toolbar {
    ToolbarItem(placement: .keyboard) {
        Button("Done") {
            keyboardFocused = false
        }
        .frame(maxWidth: .infinity, alignment: .trailing)
    }
}

方案2：给ToolbarItemGroup内的布局强制占满宽度

如果一定要用ToolbarItemGroup，可以将内容放在HStack中并设置maxWidth: .infinity，强制布局占满工具栏宽度：

.toolbar {
    ToolbarItemGroup(placement: .keyboard) {
        HStack {
            Spacer()
            Button("Done") {
                keyboardFocused = false
            }
        }
        .frame(maxWidth: .infinity)
    }
}

方案3：忽略警告（不推荐）

虽然系统会自动打破冲突约束，界面显示不受影响，但警告可能掩盖其他潜在布局问题，建议优先修复。

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