You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI中如何创建带Done按钮的多行TextField以收起键盘或跳转?

SwiftUI 多行文本框实现Done按钮功能(收起键盘/跳转下一个输入框)

直接上可运行的纯SwiftUI代码示例,包含两个多行文本框:点击第一个的Done按钮会跳转到第二个输入框,点击第二个的Done按钮则直接收起键盘。

import SwiftUI

struct MultiLineTextFieldDemo: View {
    @State private var text1 = ""
    @State private var text2 = ""
    // 用FocusState管理当前焦点的输入框
    @FocusState private var focusedField: Field?
    
    enum Field {
        case field1, field2
    }
    
    var body: some View {
        VStack(spacing: 20) {
            TextField("输入长文本1", text: $text1, axis: .vertical)
                .textFieldStyle(.plain)
                .focused($focusedField, equals: .field1)
                .submitLabel(.done)
                .onSubmit {
                    // 点击Done时切换到下一个输入框
                    focusedField = .field2
                }
                .padding()
                .border(.gray)
            
            TextField("输入长文本2", text: $text2, axis: .vertical)
                .textFieldStyle(.plain)
                .focused($focusedField, equals: .field2)
                .submitLabel(.done)
                .onSubmit {
                    // 最后一个输入框,点击Done收起键盘
                    hideKeyboard()
                }
                .padding()
                .border(.gray)
        }
        .padding()
    }
    
    // 收起键盘的工具方法
    private func hideKeyboard() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

struct MultiLineTextFieldDemo_Previews: PreviewProvider {
    static var previews: some View {
        MultiLineTextFieldDemo()
    }
}

关键逻辑说明:

  1. 多行文本框实现:通过TextField的axis: .vertical参数开启垂直多行模式,配合.textFieldStyle(.plain)让文本框高度随输入内容自适应(需要固定高度的话可以加.frame(height: ...))。
  2. 焦点控制:用@FocusState枚举跟踪当前激活的输入框,实现Done按钮点击后的焦点跳转逻辑。
  3. 覆盖默认行为:多行TextField的Done按钮默认是换行,通过.onSubmit回调替换这个默认行为,自定义跳转或收起键盘的操作。
  4. 收起键盘:调用UIApplication的系统方法强制收起键盘,这是纯SwiftUI场景下最直接的实现方式。

针对你之前尝试的问题补充:

  • .submitLabel(.done)仅设置按钮文字,默认行为还是换行,必须配合.onSubmit才能修改逻辑;
  • 旧的onCommit参数已被.onSubmit替代,现在用.onSubmit可以和axis参数完美共存;
  • axis: .vertical模式下,.lineLimit(nil)是默认行为,不需要额外设置,文本框会自动换行并扩展高度。

内容的提问来源于stack exchange,提问作者Vee

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.01 15:50:12