SwiftUI iOS16中为.numberPad键盘添加返回键及解决遮挡问题

一、给数字键盘添加返回（Done）键 #

iOS原生数字键盘默认没有返回键，用SwiftUI原生的Toolbar就能快速添加，同时结合焦点状态管理键盘收起：

1. 先在View里添加焦点状态变量：

@Binding var path: NavigationPath
@State private var amount : String = ""
@FocusState private var amountIsFocused: Bool // 新增：管理输入框焦点

2. 修改TextField的配置，绑定焦点并添加键盘工具栏：

TextField ("", text: $amount)
    .multilineTextAlignment (.center)
    .background (Color("db"))
    .font (.custom("Bebas Neue", size: 40))
    .foregroundStyle (
        LinearGradient (
            gradient : Gradient (colors: [Color("lb"), Color("rb")]),
            startPoint : .top,
            endPoint : .bottom
        )
    )
    .frame (width: 250, height: 50)
    .padding (.horizontal,100)
    .frame (width: 250)
    .frame (height: 50)
    .overlay (
        RoundedRectangle (cornerRadius: 7)
        .stroke (
            LinearGradient (
                gradient : Gradient (colors: [Color("lb"), Color("rb")]),
                startPoint : .top,
                endPoint : .bottom
            ),
            lineWidth : 1
        )
    )
    .keyboardType (.numberPad)
    .focused($amountIsFocused) // 绑定焦点状态
    .toolbar { // 给键盘顶部加Done按钮
        ToolbarItem(placement: .keyboard) {
            HStack {
                Spacer()
                Button("Done") {
                    amountIsFocused = false // 取消焦点，收起键盘
                }
                .font(.custom("Bebas Neue", size: 18))
                .foregroundStyle(LinearGradient(gradient: Gradient(colors: [Color("lb"), Color("rb")]), startPoint: .top, endPoint: .bottom))
            }
        }
    }

二、解决按钮被键盘遮挡的问题 #

横屏时键盘弹出会占据大量空间，把核心内容包裹在ScrollView里，就能让视图自动调整滚动位置，同时支持滑动收起键盘：

修改最外层的布局结构，把原有的VStack放到ScrollView中：

GeometryReader { reader in
    ZStack {
        Color("db").ignoresSafeArea()
        ScrollView { // 新增：用ScrollView包裹内容
            VStack {
                NavigationHeader(userName: "Paolo")
                Spacer(minLength: 20) // 用固定最小间距替代原Spacer，避免过度压缩
                HStack(spacing: 60) {
                    // 中间的ImageRowView2、Bet表单等内容保持不变
                }
                Spacer(minLength: 20)
                NavigationFooter()
            }
            .padding(.horizontal, 16) // 加水平内边距，优化横屏显示
        }
        .scrollDismissesKeyboard(.interactively) // 支持滑动收起键盘
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .navigationBarBackButtonHidden()
}

效果说明 #

• 点击键盘顶部的Done按钮，会直接收起键盘并取消输入框焦点；
• 滑动ScrollView时，键盘会自动收起，同时底部的Bet按钮和NavigationFooter不会被遮挡；
• 整个布局适配横屏模式，不会因为键盘弹出导致关键交互元素不可见。

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