Flutter AdMob广告布局问题：避免AppBar遮挡或置于顶部

安全阿岳

2026-8-1

解决AdMob广告在Flutter顶部的显示问题

方案一：调整AppBar的flexibleSpace避免遮挡

AppBar的flexibleSpace层级低于leading、title和trailing，所以会被这些元素遮挡。可以通过以下方式调整：

不需要导航元素时：直接隐藏leading、title，取消间距，让广告占满flexibleSpace区域
需要保留导航元素时：不推荐强行让广告覆盖导航（会影响交互），更建议改用方案二

AppBar(
  leading: SizedBox.shrink(), // 隐藏左侧导航按钮
  titleSpacing: 0,
  title: SizedBox.shrink(), // 隐藏标题
  flexibleSpace: Container(
    width: double.infinity,
    height: 50, // 匹配AdMob横幅广告高度
    child: AdWidget(ad: _bannerAd), // 你的广告组件
  ),
)

方案二：将广告放在Scaffold上方（正确的Column用法）

之前用Column包裹失败是因为没处理布局约束，正确做法是让Scaffold占满剩余空间：

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      // 顶部广告栏
      Container(
        width: double.infinity,
        height: 50,
        child: AdWidget(ad: _bannerAd),
      ),
      // Scaffold填充剩余屏幕空间
      Expanded(
        child: Scaffold(
          appBar: AppBar(
            title: Text("页面标题"),
            // 正常配置leading、trailing等导航元素
          ),
          body: // 页面主体内容
        ),
      ),
    ],
  );
}