Flutter中如何在SingleChildScrollView的Column底部放置AdMob Banner

我懂你现在的困扰——在SingleChildScrollView嵌套Column的布局里，想把AdMob Banner固定在页面底部却没成功。这其实是因为SingleChildScrollView会让内部的Column根据内容高度无限延伸，你把Banner放在Column最后，它会跟着页面内容一起滚动，而不是停留在屏幕底部。

下面给你两种简单有效的解决方案：

方法一：利用Scaffold的bottomNavigationBar属性（最推荐） #

Scaffold自带的bottomNavigationBar属性专门用来放置固定在底部的组件，完全不需要调整滚动布局，直接把Banner放在这里就行：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(APPNAME),
        actions: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 20.0),
            child: GestureDetector(
              onTap: () {
                Share.share();
              },
              child: Icon(Icons.share, size: 26.0,),
            ),
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            // 你的其他Container组件...
          ],
        )),
      // 把Banner放在这里，固定在底部
      bottomNavigationBar: Container(
        // 避免Banner和系统底部导航栏重叠（如果有的话）
        margin: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
        child: AdmobBanner(
          adUnitId: "ca-app-pub-3940256099942544/6300978111",
          adSize: AdmobBannerSize.BANNER
        ),
      ),
      drawer: new Elements().drawer(context),
    );
  }
}

方法二：使用Stack布局 #

如果不想用bottomNavigationBar，也可以用Stack把滚动内容和Banner叠在一起，让Banner固定在底部：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(APPNAME),
        actions: <Widget>[
          Padding(
            padding: EdgeInsets.only(right: 20.0),
            child: GestureDetector(
              onTap: () {
                Share.share();
              },
              child: Icon(Icons.share, size: 26.0,),
            ),
          )
        ],
      ),
      body: Stack(
        children: [
          // 滚动内容，要给底部加Banner高度的padding，避免内容被挡住
          SingleChildScrollView(
            padding: EdgeInsets.only(bottom: 50.0), // Banner的高度大概是50px，可根据实际调整
            child: Column(
              children: <Widget>[
                // 你的其他Container组件...
              ],
            ),
          ),
          // Banner固定在底部
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: AdmobBanner(
              adUnitId: "ca-app-pub-3940256099942544/6300978111",
              adSize: AdmobBannerSize.BANNER
            ),
          )
        ],
      ),
      drawer: new Elements().drawer(context),
    );
  }
}

小提醒 #

• 你当前用的是AdMob测试广告ID，正式发布App时记得替换成自己的真实广告ID哦。
• 如果用方法二，记得根据你选择的AdmobBannerSize调整底部padding的数值，确保滚动内容不会被Banner遮挡。

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