Flutter中移除或隐藏TextField时如何保持键盘不自动收起

核心思路 #

不要直接把TextField从视图层级中移除，而是把它的透明度设为0，同时禁止它的用户交互，这样系统会认为TextField仍然处于活跃状态，不会自动收起键盘，底部输入栏的高度也不会发生变化，语音按钮也就不会移位。

各端具体实现 #

iOS端（Swift） #

• 触发语音录制时，不要调用textField.removeFromSuperview()，也不要设置textField.isHidden = true，改为执行以下配置：

textField.alpha = 0
textField.isUserInteractionEnabled = false
// 可选：如果当前已经失去聚焦，可以加这行保持第一响应者状态
textField.becomeFirstResponder()

• 结束语音录制需要恢复输入框时，还原属性即可：

textField.alpha = 1
textField.isUserInteractionEnabled = true

Android端（Kotlin） #

• 触发语音录制时，不要把EditText的可见性设为GONE，而是设为INVISIBLE，同时禁用输入：

editText.visibility = View.INVISIBLE
editText.isEnabled = false
// 保持键盘不收起
editText.requestFocus()
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, InputMethodManager.SHOW_IMPLICIT)

• 结束录制恢复时：

editText.visibility = View.VISIBLE
editText.isEnabled = true

Flutter端 #

• 不要把TextField从Widget树中移除，也不要用Visibility的gone属性，改用Opacity组件包裹，同时设置enabled为false：

Opacity(
  opacity: 0,
  child: TextField(
    enabled: false,
    // 保留原来的focusNode配置，确保处于聚焦状态
    focusNode: yourFocusNode,
  ),
)
// 触发录制时确保focusNode处于聚焦状态
FocusScope.of(context).requestFocus(yourFocusNode);

React Native端 #

• 不要把TextInput从组件树移除，设置opacity: 0和editable: false即可：

<TextInput
  style={{opacity: 0}}
  editable={false}
  // 保持聚焦
  autoFocus={true}
  ref={inputRef}
/>
// 触发录制时手动调用聚焦
inputRef.current?.focus()

注意事项 #

• 不要尝试手动强制弹出键盘，这种方式在不同系统版本、不同厂商定制ROM上兼容性极差，通过保持输入框活跃状态实现的效果适配性最高
• 替换输入框位置的计时器组件高度要和原来的TextField高度保持一致，避免底部输入栏整体高度变化导致按钮移位
• 如果有点击空白区域收起键盘的逻辑，需要在语音录制状态下临时屏蔽该逻辑，避免录制过程中误触导致键盘收起

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