Flutter：键盘弹出时如何让Widget预留BottomSheet空间提前滚动？

针对你遇到的键盘弹出时BottomSheet遮挡TextFormField最后一行、无法提前滚动的问题，这里提供几个可行的解决方案，同时避开你之前踩过的maxHeight和Expanded的坑：

方法1：动态添加底部预留内边距 #

利用MediaQuery获取键盘弹出时的底部偏移量，再加上BottomSheet的65px高度，给滚动容器设置底部内边距，让输入框提前留出空间，避免被遮挡。

// 用SingleChildScrollView包裹输入框，不要套Expanded
SingleChildScrollView(
  padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom + 65, // 预留BottomSheet高度
    left: 16,
    right: 16,
    top: 16,
  ),
  child: TextFormField(
    maxLines: null, // 开启多行输入
    expands: false,
    decoration: InputDecoration(
      hintText: "请输入内容",
      border: OutlineInputBorder(),
    ),
  ),
)

注意事项 #

不要给SingleChildScrollView嵌套Expanded——Expanded会强制滚动容器占满剩余空间，和动态变化的键盘内边距冲突，导致布局异常。直接将滚动容器放在Scaffold的body或Column的子项中即可。

方法2：自定义滚动控制器精确控制 #

如果方法1不生效，可以通过监听输入框的焦点状态，结合滚动控制器主动调整滚动位置，确保输入内容始终可见。

final ScrollController _scrollController = ScrollController();
final FocusNode _inputFocusNode = FocusNode();
final GlobalKey _textFieldKey = GlobalKey();

@override
void initState() {
  super.initState();
  // 监听输入框焦点，键盘弹出时调整滚动位置
  _inputFocusNode.addListener(() {
    if (_inputFocusNode.hasFocus) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        final renderBox = _textFieldKey.currentContext?.findRenderObject() as RenderBox?;
        if (renderBox == null) return;
        
        final inputBottom = renderBox.localToGlobal(Offset.zero).dy + renderBox.size.height;
        final screenHeight = MediaQuery.of(context).size.height;
        final availableHeight = screenHeight - MediaQuery.of(context).viewInsets.bottom - 65;
        
        // 若输入框底部超出可用区域，滚动到可见位置
        if (inputBottom > availableHeight) {
          _scrollController.animateTo(
            _scrollController.offset + (inputBottom - availableHeight),
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeOut,
          );
        }
      });
    }
  });
}

// 布局部分
SingleChildScrollView(
  controller: _scrollController,
  child: TextFormField(
    key: _textFieldKey,
    focusNode: _inputFocusNode,
    maxLines: null,
    expands: false,
    decoration: InputDecoration(
      hintText: "请输入内容",
      border: OutlineInputBorder(),
    ),
  ),
)

方法3：用ListView替代SingleChildScrollView #

ListView本身自带滚动特性，直接设置底部padding即可，同样能避免Expanded带来的布局问题：

ListView(
  padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom + 65,
    left: 16,
    right: 16,
    top: 16,
  ),
  children: [
    TextFormField(
      maxLines: null,
      expands: false,
      decoration: InputDecoration(
        hintText: "请输入内容",
        border: OutlineInputBorder(),
      ),
    ),
    // 页面其他组件
  ],
)

内容的提问来源于stack exchange，提问作者Charlie Page