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() } }
关键逻辑说明:
- 多行文本框实现:通过
TextField的axis: .vertical参数开启垂直多行模式,配合.textFieldStyle(.plain)让文本框高度随输入内容自适应(需要固定高度的话可以加.frame(height: ...))。 - 焦点控制:用
@FocusState枚举跟踪当前激活的输入框,实现Done按钮点击后的焦点跳转逻辑。 - 覆盖默认行为:多行
TextField的Done按钮默认是换行,通过.onSubmit回调替换这个默认行为,自定义跳转或收起键盘的操作。 - 收起键盘:调用
UIApplication的系统方法强制收起键盘,这是纯SwiftUI场景下最直接的实现方式。
针对你之前尝试的问题补充:
.submitLabel(.done)仅设置按钮文字,默认行为还是换行,必须配合.onSubmit才能修改逻辑;- 旧的
onCommit参数已被.onSubmit替代,现在用.onSubmit可以和axis参数完美共存; axis: .vertical模式下,.lineLimit(nil)是默认行为,不需要额外设置,文本框会自动换行并扩展高度。
内容的提问来源于stack exchange,提问作者Vee
相关产品推荐
相关产品推荐

