Flutter中Column内多TextField被键盘遮挡问题求助

问题原因 #

你当前代码里的SingleChildScrollView设置了reverse: true，会反转滚动方向，干扰焦点TextField的自动滚动逻辑；同时注释掉的动态底部内边距未正确应用，导致键盘弹出时内容无法向上偏移足够距离。

修复步骤 #

1. 移除reverse: true：该属性会让滚动视图从底部开始布局，破坏默认的焦点滚动适配，直接删除即可。
2. 启用动态底部内边距：利用MediaQuery获取键盘高度，给SingleChildScrollView设置底部padding，确保键盘弹出时内容能向上滚动避开遮挡。
3. 优化Column布局：给Column添加mainAxisSize: MainAxisSize.min，避免生成多余的空白空间，让滚动视图能准确计算内容高度。

修改后的完整代码 #

return Scaffold(
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        _viewOnlyItemCell('ID', _accountInfoData!.iD.toString() ?? ''),
        _viewOnlyItemCell('Account Name', _accountInfoData!.accountName ?? ''),
        _viewOnlyItemCell('Account ID', _accountInfoData!.accountID ?? ''),
        _accountType(),
        _editableItemCell('Phone', 'Enter Phone Number', _phone, _onChangePhoneNo),
        _editableItemCell('Fax', 'Enter Fax Number', _fax, _onChangeFax),
        _editableItemCell('Email', 'Enter Email ID', _email, _onChangeEmail),
        _editableItemCell('Website', 'Enter Website', _website, _onChangeWebsite),
        _editableItemCell('Mailing Address 1', 'Enter Mailing Address 1', _mailingAddress1, _onChangeMailingAddressOne),
        _editableItemCell('Mailing Address 2', 'Enter Mailing Address 2', _mailingAddress2, _onChangeMailingAddressTwo),
        _editableItemCell('Mailing City', 'Enter Mailing City', _mailingCity, _onChangeMailingCity),
        _editableItemCell('Mailing State', 'Enter Mailing State', _mailingState, _onChangeMailingState),
        _editableItemCell('Mailing Zip', 'Enter Mailing Zip', _mailingZip, _onChangeMailingZip),
        _groupName(),
      ],
    ),
  ),
);

额外优化方案 #

如果需要更精准的滚动控制，可以给最后一个TextField绑定焦点监听器，配合ScrollController手动滚动到目标位置：

final ScrollController _scrollController = ScrollController();
final FocusNode _lastFieldFocus = FocusNode();

@override
void initState() {
  super.initState();
  _lastFieldFocus.addListener(() {
    if (_lastFieldFocus.hasFocus) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
        );
      });
    }
  });
}

// 在SingleChildScrollView中设置controller: _scrollController
// 给最后一个TextField设置focusNode: _lastFieldFocus

内容的提问来源于stack exchange，提问作者Mamoon Ansari