SwiftUI中ToolbarItem使用.keyboard布局时出现警告问题排查

在Xcode 16.2、iOS 18环境的新项目中，给TextField添加placement: .keyboard的ToolbarItemGroup时，会弹出以下布局警告：

Invalid frame dimension (negative or non-finite). Unable to simultaneously satisfy constraints.

移除Toolbar后警告立即消失，就算加上NavigationStack和@FocusState控制焦点，警告依然存在。

触发警告的代码示例 #

基础版本

struct ContentView: View {
    @State private var input = "Input..."

    var body: some View {
        TextField("Input", text: $input)
            .textFieldStyle(.roundedBorder)
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    Button("Submit") {
                        print("Submitted")
                    }
                }
            }
    }
}

#Preview {
    ContentView()
}

带NavigationStack和FocusState版本

struct ContentView: View {
    @State private var input = "Input..."
    @FocusState var isInputActive: Bool

    var body: some View {
        NavigationStack {
            TextField("Input", text: $input)
                .textFieldStyle(.roundedBorder)
                .focused($isInputActive)
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Button("Submit") {
                            print("Submitted")
                        }
                    }
                }
        }
    }
}

无警告的对比代码（移除Toolbar）

struct ContentView: View {
    @State private var input = "Input..."

    var body: some View {
        TextField("Input", text: $input)
            .textFieldStyle(.roundedBorder)
    }
}

临时解决办法 #

这个问题属于iOS 18的系统布局bug，目前可以通过以下几种方式规避：

• 给工具栏元素添加固定尺寸
  给ToolbarItemGroup内的按钮设置明确的宽高，避免系统计算出异常尺寸：

  .toolbar {
      ToolbarItemGroup(placement: .keyboard) {
          Button("Submit") {
              print("Submitted")
          }
          .frame(width: 80, height: 32)
      }
  }
  

• 用ToolbarItem替代ToolbarItemGroup
  如果工具栏只有单个元素，直接使用ToolbarItem可以绕过这个问题：

  .toolbar {
      ToolbarItem(placement: .keyboard) {
          Button("Submit") {
              print("Submitted")
          }
      }
  }
  

• 给工具栏内容套HStack并设置最小尺寸
  把ToolbarItemGroup里的内容放进HStack，同时设置最小宽高，强制布局系统使用合法尺寸：

  .toolbar {
      ToolbarItemGroup(placement: .keyboard) {
          HStack {
              Spacer()
              Button("Submit") {
                  print("Submitted")
              }
          }
          .frame(minWidth: 0, minHeight: 44)
      }
  }
  

说明 #

这是iOS 18和Xcode 16.2的兼容性问题，苹果大概率会在后续的系统或工具更新中修复，当前先用上述临时方案解决即可。

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