如何将google_mobile_ads的AdWidget集成到现有Flutter应用并修复布局问题

问题原因 #

• Banner位置错误：你把alignment属性放在了Container内部，这个属性只会控制Container的子元素（也就是AdWidget）在Container范围内的对齐。而Stack默认会让未定位的子元素从左上角开始排布，你的Container本身高度和AdWidget一致，所以整体就出现在屏幕顶部区域，内部对齐到底部就刚好显示在屏幕中部。
• 滚动异常：大概率是SingleChildScrollView的底部内容被Banner遮挡，你误以为无法滚动；如果确实完全不能滚动，检查你外部是否嵌套了其他可滚动组件或者手势冲突，你当前给出的代码段本身不会触发滚动失效。

修复方案 #

方案1：保持Stack悬浮广告布局（广告不占页面高度，悬浮在底部） #

body: Stack(
  fit: StackFit.expand, // 强制所有子元素填满Stack的可用空间
  children: [
    // 给SingleChildScrollView加底部padding，避免最底部的内容被广告挡住
    Padding(
      padding: EdgeInsets.only(bottom: 60.0), // 这个值要大于你的Banner高度+10dp边距，按需调整
      child: SingleChildScrollView(
        child: Column(
          children: [
            for (var i = 0; i < data.length; i++) Message(i, data[i]),
          ],
        ),
      ),
    ),
    // 用Positioned直接定位Banner到底部，不要用Container的alignment
    Positioned(
      left: 0,
      right: 0,
      bottom: 10.0, // 直接指定底部边距，符合你的需求
      child: Center(
        child: AdWidget(ad: bannerAd),
      ),
    ),
  ],
),

方案2：普通Column布局（广告占固定底部高度，不会遮挡列表内容） #

如果你不需要广告悬浮，只是固定在页面底部，优先用这个方案，更稳定：

body: Column(
  children: [
    // 用Expanded让SingleChildScrollView占除广告外的所有剩余高度
    Expanded(
      child: SingleChildScrollView(
        child: Column(
          children: [
            for (var i = 0; i < data.length; i++) Message(i, data[i]),
          ],
        ),
      ),
    ),
    // 广告放在底部，直接加padding即可
    Padding(
      padding: EdgeInsets.only(bottom: 10.0),
      child: AdWidget(ad: bannerAd),
    ),
  ],
),

额外注意点 #

• 使用AdWidget前要确保bannerAd已经完成加载，否则会出现空白或者报错，可以加个加载状态判断，只有加载成功才渲染AdWidget。
• 官方要求AdWidget必须放在有明确尺寸的容器内，你可以给AdWidget外层套个SizedBox指定宽高，避免布局溢出。

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