Flutter Android端Admob自适应横幅尺寸异常（含空白区域）

问题原因 #

1. 广告可用宽度计算未扣除SafeArea留白和页面内边距，导致获取的尺寸与实际显示区域不匹配
2. 广告容器未做居中处理，宽度不足时默认左对齐，出现空白区域

解决方案 #

1. 修正广告可用宽度计算 #

原代码直接使用屏幕全宽计算广告尺寸，忽略了页面的内边距和SafeArea的左右留白，导致广告尺寸偏大。修改_loadAd方法，计算真实可用宽度：

Future<void> _loadAd(adunit) async {
  final mediaQuery = MediaQuery.of(context);
  final screenWidth = mediaQuery.size.width;
  // 扣除SafeArea左右留白 + 页面的左右padding（各5，总计10）
  final availableWidth = (screenWidth - mediaQuery.padding.left - mediaQuery.padding.right - 10).truncate();

  final AnchoredAdaptiveBannerAdSize? size =
      await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(availableWidth);

  if (size == null) {
    print('无法获取自适应横幅尺寸');
    return;
  }

  _anchoredAdaptiveAd = BannerAd(
    adUnitId: kReleaseMode 
        ? adunit 
        : 'ca-app-pub-3940256099942544/6300978111', 
    size: size,
    request: AdRequest(),
    listener: BannerAdListener(
      onAdLoaded: (Ad ad) {
        print('广告加载完成: ${ad.responseInfo}');
        setState(() {
          _anchoredAdaptiveAd = ad as BannerAd;
          _isLoaded = true;
        });
      },
      onAdFailedToLoad: (Ad ad, LoadAdError error) {
        print('自适应横幅加载失败: $error');
        ad.dispose();
      },
    ),
  );
  return _anchoredAdaptiveAd!.load();
}

2. 实现广告容器居中 #

通过以下两种方式让广告在ListView中居中：

方式一：用Center组件包裹

if (_anchoredAdaptiveAd != null && _isLoaded)
  Center(
    child: Container(
      color: Colors.green,
      width: _anchoredAdaptiveAd!.size.width.toDouble(),
      height: _anchoredAdaptiveAd!.size.height.toDouble(),
      child: AdWidget(ad: _anchoredAdaptiveAd!),
    ),
  ),

方式二：设置自动margin

if (_anchoredAdaptiveAd != null && _isLoaded)
  Container(
    color: Colors.green,
    width: _anchoredAdaptiveAd!.size.width.toDouble(),
    height: _anchoredAdaptiveAd!.size.height.toDouble(),
    margin: EdgeInsets.symmetric(
      horizontal: (MediaQuery.of(context).size.width - _anchoredAdaptiveAd!.size.width) / 2,
    ),
    child: AdWidget(ad: _anchoredAdaptiveAd!),
  ),

3. 监听屏幕方向变化，重新加载广告 #

自适应横幅尺寸与屏幕方向绑定，旋转屏幕后需重新加载广告适配新方向：

1. 在State类中添加方向变量：

Orientation? _previousOrientation;

2. 初始化时注册监听并加载广告：

@override
void initState() {
  super.initState();
  _previousOrientation = MediaQuery.of(context).orientation;
  WidgetsBinding.instance.addObserver(this);
  _loadAd(yourAdUnitId); // 替换为你的广告单元ID
}

3. 处理方向变化事件：

@override
void didChangeMetrics() {
  super.didChangeMetrics();
  final currentOrientation = MediaQuery.of(context).orientation;
  if (currentOrientation != _previousOrientation) {
    _previousOrientation = currentOrientation;
    // 销毁旧广告并重置状态
    _anchoredAdaptiveAd?.dispose();
    setState(() {
      _isLoaded = false;
      _anchoredAdaptiveAd = null;
    });
    _loadAd(yourAdUnitId);
  }
}

4. 页面销毁时清理资源：

@override
void dispose() {
  WidgetsBinding.instance.removeObserver(this);
  _anchoredAdaptiveAd?.dispose();
  super.dispose();
}

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