Flutter应用键盘弹出时TextField被遮挡，如何实现上移？

问题根源 #

你当前的聊天界面使用Stack包裹消息列表和输入框，Stack的绝对定位特性会导致输入框无法随键盘弹出自动上移——即使resizeToAvoidBottomInset设为true，Stack也不会响应Scaffold body的尺寸变化，最终输入框被键盘遮挡。

解决方案 #

方案一：使用Scaffold的bottomNavigationBar放置输入框（推荐） #

利用Flutter原生布局特性，将输入框移到Scaffold的bottomNavigationBar属性中，这样系统会自动处理键盘弹出时的布局上移。

修改chatArea方法：

Widget chatArea() {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    scrollToBottom();
  });
  return Scaffold(
    resizeToAvoidBottomInset: true,
    body: ListView.builder(
      controller: scrollController,
      reverse: true,
      itemCount: messages.length,
      shrinkWrap: true,
      padding: const EdgeInsets.only(top: 10, bottom: 10),
      physics: const ScrollPhysics(),
      itemBuilder: (context, index) {
        return Container(
          padding: const EdgeInsets.only(left: 14, right: 14, top: 10, bottom: 10),
          child: Align(
            alignment: (messages[index].userID != userId ? Alignment.topLeft : Alignment.topRight),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: (messages[index].userID != userId ? Colors.grey.shade200 : Colors.blue[200]),
              ),
              padding: const EdgeInsets.all(16),
              child: isLinkMessage(messages[index].message) ? linkMessage(index) : regularMessage(index),
            ),
          ),
        );
      },
    ),
    bottomNavigationBar: Container(
      padding: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
      height: 60,
      width: double.infinity,
      color: Colors.white,
      child: Row(
        children: <Widget>[
          const SizedBox(width: 4),
          Expanded(
            child: TextField(
              controller: messageController,
              decoration: InputDecoration(
                  hintText: mainLocalization.localization.writeMessage,
                  hintStyle: getFontStyle(14, Colors.black, FontWeight.normal, widget.general),
                  border: InputBorder.none),
            ),
          ),
          const SizedBox(width: 15),
          FloatingActionButton(
            onPressed: sendMessage,
            backgroundColor: widget.general.getHeaderColor(),
            elevation: 0,
            child: Icon(
              Icons.send,
              color: widget.general.getHeaderItemsColor(),
              size: 18,
            ),
          ),
        ],
      ),
    ),
  );
}

修改说明：

• 移除原Stack布局，将消息列表直接作为Scaffold的body
• 将输入框容器移到bottomNavigationBar中，系统自动处理键盘适配
• 移除ListView的bottom:70 padding，bottomNavigationBar会自动留出空间

方案二：保持Stack布局，添加动态键盘适配padding #

如果不想改动整体布局结构，可通过MediaQuery获取键盘高度，给输入框容器添加动态底部padding：

修改chatArea中的输入框部分：

Align(
  alignment: Alignment.bottomLeft,
  child: Padding(
    padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
    child: Container(
      padding: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
      height: 60,
      width: double.infinity,
      color: Colors.white,
      child: Row(
        children: <Widget>[
          // 原输入框内容保持不变
        ],
      ),
    ),
  ),
),

确保Scaffold的resizeToAvoidBottomInset仍设为true，这样MediaQuery能正确获取键盘高度，动态调整padding将输入框推到键盘上方。

额外优化：键盘弹出时自动滚动到最新消息 #

在initState中添加键盘监听，确保弹出键盘时消息列表自动滚动到底部：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addObserver(
    LifecycleEventHandler(
      onMetricsChanged: () {
        if (MediaQuery.of(context).viewInsets.bottom > 0) {
          scrollToBottom();
        }
      },
    ),
  );
}

class LifecycleEventHandler extends WidgetsBindingObserver {
  final VoidCallback? onMetricsChanged;

  LifecycleEventHandler({this.onMetricsChanged});

  @override
  void didChangeMetrics() {
    onMetricsChanged?.call();
    super.didChangeMetrics();
  }
}

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