Flutter中TextField气泡被键盘遮挡问题求助

问题根源 #

你当前用Stack+Positioned固定输入框在屏幕底部，这种绝对定位方式不会响应键盘弹出时的界面高度变化，导致输入框被键盘遮挡。而WhatsApp这类应用的输入框能随键盘上移，是因为利用了Flutter内置的界面布局响应机制。

最优解决方案：使用Scaffold的bottomNavigationBar属性 #

直接将输入框组件放在Scaffold的bottomNavigationBar中，这个属性会自动处理键盘弹出时的位置调整，无需手动计算高度。

修改后的完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(ChatApp());
}

class ChatApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chat App"),
        backgroundColor: Colors.blueAccent,
      ),
      body: ListView.builder(
        itemCount: 0,
        itemBuilder: (context, index) {
          return Text('Example');
        },
      ),
      // 将输入框移到bottomNavigationBar中
      bottomNavigationBar: ChatInputField(),
    );
  }
}

class ChatInputField extends StatelessWidget {
  final Color color = Colors.grey[200]!;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
      child: textFieldContainerWidget(),
    );
  }

  Widget textFieldContainerWidget() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(20.0),
      ),
      child: textFieldWidget(),
    );
  }

  Widget textFieldWidget() {
    return ConstrainedBox(
      constraints: BoxConstraints(maxHeight: 100),
      child: TextField(
        textInputAction: TextInputAction.newline,
        maxLines: null,
        style: TextStyle(fontSize: 17.0, height: 1.0, color: color),
        decoration: InputDecoration(
          hintText: 'Message',
          hintStyle: TextStyle(fontSize: 17.0, height: 1.0, color: color),
          border: InputBorder.none,
        ),
      ),
    );
  }
}

其他可选方案（手动处理键盘高度） #

如果必须使用Stack，可以通过监听键盘高度动态调整输入框位置：

• 用MediaQuery.of(context).viewInsets.bottom获取当前键盘高度
• 将Positioned的bottom值设置为MediaQuery.of(context).viewInsets.bottom + 2.0
• 需要在StatefulWidget中监听界面变化，确保键盘高度更新时重新构建组件

不过这种方法需要额外处理状态更新，不如使用bottomNavigationBar简洁可靠。

内容的提问来源于stack exchange，提问作者J. brow