iOS 17中SwiftUI Toolbar置于键盘上方失效问题求解

原代码在 iOS 16.4 及更低版本可正常显示键盘上方的工具栏，但在 iOS 17 中失效，这是因为苹果调整了工具栏与键盘场景的关联逻辑。以下是适配 iOS 17 的解决方案：

基础适配方案 #

直接为键盘场景单独配置工具栏，修改代码如下：

import SwiftUI

struct TestingView: View {
    @State var myText = ""
    @State var myText2 = ""

    var body: some View {
        NavigationStack {
            Form {
                Text("Row 1")
                Text("Row 2")
                TextField("Write here", text: $myText)
                TextField("Write here too", text: $myText2)
            }
            .navigationTitle("Testing Toolbar")
            .navigationBarTitleDisplayMode(.inline)
            // 明确为键盘场景绑定工具栏
            .toolbar(for: .keyboard) {
                ToolbarItemGroup(placement: .keyboard) {
                    Button {
                        print("Button up pressed")
                    } label: {
                        Image(systemName: "chevron.up")
                    }

                    Button {
                        print("Button down pressed")
                    } label: {
                        Image(systemName: "chevron.down")
                    }
                    Spacer()
                }
            }
        }
    }
}

struct TestingView_Previews: PreviewProvider {
    static var previews: some View {
        TestingView()
    }
}

多版本兼容方案 #

如果需要同时适配 iOS 16 及以下版本，可以通过版本判断实现兼容：

import SwiftUI

struct TestingView: View {
    @State var myText = ""
    @State var myText2 = ""

    var body: some View {
        NavigationStack {
            Form {
                Text("Row 1")
                Text("Row 2")
                TextField("Write here", text: $myText)
                TextField("Write here too", text: $myText2)
            }
            .navigationTitle("Testing Toolbar")
            .navigationBarTitleDisplayMode(.inline)
            // iOS 16 及以下的写法
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    keyboardToolbarButtons()
                }
            }
            // iOS 17+ 新增的键盘场景配置
            .toolbar(for: .keyboard) {
                ToolbarItemGroup(placement: .keyboard) {
                    keyboardToolbarButtons()
                }
            }
        }
    }

    // 提取工具栏按钮，避免重复代码
    @ViewBuilder
    private func keyboardToolbarButtons() -> some View {
        Button {
            print("Button up pressed")
        } label: {
            Image(systemName: "chevron.up")
        }

        Button {
            print("Button down pressed")
        } label: {
            Image(systemName: "chevron.down")
        }
        Spacer()
    }
}

struct TestingView_Previews: PreviewProvider {
    static var previews: some View {
        TestingView()
    }
}

原理说明 #

iOS 17 中，苹果要求键盘工具栏必须通过 .toolbar(for: .keyboard) 明确绑定到键盘场景，原有的直接在 .toolbar 中添加 ToolbarItemGroup(placement: .keyboard) 的方式不再生效，因此需要调整配置逻辑。

内容的提问来源于stack exchange，提问作者Ariel Antonio Fundora