Flutter中如何将横幅广告置于App Bar顶部？

核心思路就是调整Widget的层级顺序，把广告组件放到整个页面结构的最顶层，具体分两种常见场景处理：

场景1：页面内容无需滚动（固定布局） #

如果你的页面内容不需要滚动，直接用Column包裹广告和页面主体，通过Expanded让主体占满剩余屏幕空间：

修改前的结构（广告在底部） #

Scaffold(
  appBar: AppBar(title: const Text('我的页面')),
  body: const Center(child: Text('页面内容')),
  bottomNavigationBar: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
      // 原来的底部广告组件
      BannerAdWidget(),
    ],
  ),
)

修改后的结构（广告在顶部） #

Column(
  children: [
    // 移到顶部的广告组件，成为首个Widget
    BannerAdWidget(),
    Expanded(
      child: Scaffold(
        appBar: AppBar(title: const Text('我的页面')),
        body: const Center(child: Text('页面内容')),
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
          ],
        ),
      ),
    ),
  ],
)

场景2：页面内容需要滚动 #

如果页面内容需要滚动，把广告组件放到SingleChildScrollView的最前面即可：

SingleChildScrollView(
  child: Column(
    children: [
      // 顶部广告
      BannerAdWidget(),
      // 页面滚动内容
      const SizedBox(height: 1000, child: Center(child: Text('长页面内容'))),
    ],
  ),
)

注意事项 #

• 确保广告组件的initState和dispose方法正确处理广告的初始化与销毁，避免内存泄漏：

  class BannerAdWidget extends StatefulWidget {
    const BannerAdWidget({super.key});
  
    @override
    State<BannerAdWidget> createState() => _BannerAdWidgetState();
  }
  
  class _BannerAdWidgetState extends State<BannerAdWidget> {
    late BannerAd _bannerAd;
  
    @override
    void initState() {
      super.initState();
      _bannerAd = BannerAd(
        adUnitId: '你的广告ID',
        size: AdSize.banner,
        request: const AdRequest(),
        listener: const BannerAdListener(),
      )..load();
    }
  
    @override
    void dispose() {
      _bannerAd.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return SizedBox(
        height: _bannerAd.size.height.toDouble(),
        width: _bannerAd.size.width.toDouble(),
        child: AdWidget(ad: _bannerAd),
      );
    }
  }
  

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