Flutter：键盘弹出时Widget显示变短问题求助

弹出键盘时页面中的Widget显示变短，问题截图如下：

对应的页面Build方法代码：

@override
Widget build(BuildContext context) {
  return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        color: Color(0xFFF8F8F8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              flex:8,
              child: ListView.builder(
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) {
                  return Text('data');
                },
              ),
            ),
            Expanded(
              child: Align(
                alignment: FractionalOffset.bottomCenter,
                child: Row(
                  children: [
                    Expanded(
                      flex: 8,
                      child: TextField(
                        cursorColor: Colors.white,
                        decoration: InputDecoration(
                          isDense: true,
                          filled: true,
                          fillColor: Color(0xFFE2E4E8),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(30.0),
                              borderSide: BorderSide(width: 3, color: Color(0xFFE2E4E8))
                          ),
                          enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(30.0),
                              borderSide: BorderSide(width: 3, color: Color(0xFFE2E4E8))
                          ),
                          focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(30.0),
                              borderSide: BorderSide(width: 3, color: Color(0xFFE2E4E8))
                          ),
                          prefixIcon: InkWell(
                            onTap: () {
                              print('123');
                            },
                            child: Icon(
                              Icons.sentiment_satisfied_alt,
                              color: Colors.pink,
                              size: 30,
                            ),
                          ),
                          labelText: '',
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Center(
                        child: ClipOval(
                          child: Material(
                            color: Colors.transparent, // Button color
                            child: InkWell(
                              splashColor: Colors.red, // Splash color
                              onTap: () {},
                              child: Icon(Icons.send, color: Color(0xFFCC306F)),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
  );
}

问题原因 #

键盘弹出时，Flutter默认会调整页面的可用空间，Column中的Expanded组件会根据剩余空间重新分配比例，导致上方的ListView被压缩变短。

解决方案 #

方案1：禁用页面布局自动调整

在页面的Scaffold中设置resizeToAvoidBottomInset: false，阻止键盘弹出时调整页面布局：

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: false, // 新增该行
    body: Padding(
      // 原有代码保持不变
      padding: const EdgeInsets.all(8.0),
      child: Container(
        // ...
      ),
    ),
  );
}

注意：使用该方案时，底部输入框可能会被键盘遮挡，可配合SingleChildScrollView包裹整个页面内容，允许滚动查看输入框。

方案2：固定上方列表高度

通过MediaQuery获取屏幕可用高度，手动计算并固定ListView的高度，避免被压缩：

@override
Widget build(BuildContext context) {
  final screenHeight = MediaQuery.of(context).size.height;
  final bottomKeyboardHeight = MediaQuery.of(context).viewInsets.bottom;
  final inputAreaHeight = 60; // 根据实际输入区域高度调整
  final paddingTotal = 16; // 上下Padding总和（8*2）

  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      color: Color(0xFFF8F8F8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          SizedBox(
            height: screenHeight - bottomKeyboardHeight - inputAreaHeight - paddingTotal,
            child: ListView.builder(
              itemCount: 10,
              itemBuilder: (BuildContext context, int index) {
                return Text('data');
              },
            ),
          ),
          // 底部输入区域代码保持不变
          Expanded(
            child: Align(
              // ...
            ),
          ),
        ],
      ),
    ),
  );
}

方案3：使用滚动视图嵌套

如果页面结构复杂，可使用NestedScrollView或CustomScrollView来管理布局，确保键盘弹出时布局稳定。

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