Flutter自定义BottomBar在HomePage不显示缺口问题求助

1. 检查HomePage的Scaffold resizeToAvoidBottomInset 属性 #

如果HomePage的Scaffold设置了resizeToAvoidBottomInset: false，会禁止页面为底部安全区调整布局，导致BottomBar无法显示适配底部的缺口。ShopPage大概率默认使用了resizeToAvoidBottomInset: true（默认值即为true），所以正常显示缺口。

检查HomePage的Scaffold代码：

Scaffold(
  resizeToAvoidBottomInset: false, // 该设置会导致缺口消失
  bottomNavigationBar: BottomBar(),
  // ...其他代码
)

将该属性改为true或直接移除（默认就是true），验证缺口是否恢复。

2. 检查HomePage是否嵌套了影响安全区的SafeArea #

如果HomePage的整个Scaffold被SafeArea包裹且设置了bottom: true，会强制填充底部安全区，覆盖BottomBar的缺口效果：

SafeArea(
  bottom: true, // 此参数会填充底部安全区
  child: Scaffold(
    bottomNavigationBar: BottomBar(),
    // ...其他代码
  ),
)

可将bottom设为false，或移除外层的SafeArea（BottomBar自身应处理安全区适配）。

3. 检查BottomBar的安全区适配逻辑 #

确认BottomBar的代码是否正确获取并应用了底部安全区高度：

• 确保缺口是通过MediaQuery.of(context).padding.bottom计算，而非硬写固定值；
• 排查HomePage中BottomBar的context是否能正确获取MediaQuery数据（比如是否嵌套在MaterialApp之外，该情况概率较低）。

BottomBar的正确适配逻辑示例：

class BottomBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bottomPadding = MediaQuery.of(context).padding.bottom;
    return Container(
      height: 60 + bottomPadding, // 包含底部安全区高度
      child: Stack(
        children: [
          Positioned(
            bottom: bottomPadding, // 留出缺口空间
            left: 0,
            right: 0,
            child: Container(
              height: 60,
              // ...导航栏主体内容
            ),
          ),
        ],
      ),
    );
  }
}

若HomePage的bottomPadding为0（比如页面设置了全屏模式），也会导致缺口不显示，可检查是否设置了SystemUiOverlayStyle隐藏底部状态栏。

4. 检查HomePage的body布局是否影响Scaffold调整 #

如果HomePage的body是高度撑满屏幕的组件（比如Container(height: double.infinity)），可能导致Scaffold无法正确调整底部布局，进而影响BottomBar的缺口显示。尝试给body添加底部padding，或用SingleChildScrollView包裹body，触发Scaffold的布局调整。

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