Flutter设置resizeToAvoidBottomInset为false后ListView被键盘遮挡如何解决

问题根因 #

出现键盘上方多余空白的核心原因是Scaffold默认开启底部偏移调整时，会把BottomNavigationBar的高度也计入底部偏移量，导致多余空白。设置resizeToAvoidBottomInset: false虽然消除了空白，但失去了页面自动适配键盘高度的能力，才会出现列表被遮挡的问题。

修复方案 #

1. 移除Scaffold的resizeToAvoidBottomInset: false配置，恢复页面自动适配键盘高度的能力
2. 在Scaffold的body外层套MediaQuery.removePadding组件，移除底部padding的自动计算，即可消除多余空白，同时保留列表高度自动调整的特性

修改后完整代码 #

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      FocusManager.instance.primaryFocus?.unfocus();
    },
    child: SafeArea(
      child: Scaffold(
        // 已移除resizeToAvoidBottomInset: false，使用默认true即可
        body: MediaQuery.removePadding(
          // 新增该层组件消除底部多余空白计算
          context: context,
          removeBottom: true,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                width: double.infinity,
                margin: EdgeInsets.all(16),
                child: const Text("Inventory",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontFamily: "Quicksand",
                        fontSize: 20,
                        fontWeight: FontWeight.w700)),
              ),
              Container(
                child: _buildSearch(),
              ),
              Flexible(
                child: Container(
                  child: FutureBuilder(
                    future: _fetchData(),
                    builder: (context, AsyncSnapshot snapshot) {
                      if (isFiltered) {
                        isFiltered = false;
                        return ListView.builder(
                          physics: BouncingScrollPhysics(),
                          itemCount: arrFilteredStock.length,
                          itemBuilder: (context, index) {
                            var id = arrFilteredStock[index].id;
                            var code = arrFilteredStock[index].itemCode;
                            var comname = arrFilteredStock[index].itemComname;
                            var unit = arrFilteredStock[index].itemUnit;
                            var qty = arrFilteredStock[index].itemStockBalanceQty;
                            return StockCard(stock: Stock(id, code, comname, unit, qty));
                          },
                        );
                      } else {
                        if (snapshot.data == null) {
                          return Container(
                            child: const Center(
                              child: Text("Loading..."),
                            ));
                        } else {
                          return ListView.builder(
                            physics: BouncingScrollPhysics(),
                            itemCount: snapshot.data.length,
                            itemBuilder: (context, index) {
                              var id = snapshot.data[index].id;
                              var code = snapshot.data[index].itemCode;
                              var comname = snapshot.data[index].itemComname;
                              var unit = snapshot.data[index].itemUnit;
                              var qty = snapshot.data[index].itemStockBalanceQty;
                              return StockCard(stock: Stock(id, code, comname, unit, qty));
                            },
                          );
                        }
                      }
                    }),
                )
              )
            ]
          ),
        ),
        bottomNavigationBar: /* 保留你原有的底部导航栏代码即可 */,
      )
    ),
  );
}

可选优化 #

如果修改后仍存在列表底部内容被遮挡的小概率问题，可以给ListView增加动态底部padding，确保所有内容都可滑动到可视区域：

ListView.builder(
  padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  // 其余原有配置保持不变
)

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