Flutter技术求助：如何将带广告横幅的Container正确显示在Scaffold底部

我来帮你搞定这个广告位置的问题～你现在的广告Container之所以会贴在Card下面，是因为它和Card同属body里Column的子组件，自然会跟着Card的位置走。要把它固定到Scaffold的屏幕底部，有两种常用的方法，看你需求选：

方法一：固定在屏幕底部（推荐） #

直接把广告Container从body的Column里移出来，放到Scaffold自带的bottomNavigationBar属性里。这个属性就是专门用来放底部固定组件的，还能自动适配不同设备的底部安全区域（比如iPhone的刘海底部），省心又好用。

修改后的代码示例：

Scaffold(
  appBar: AppBar(...), // 保留你原来的AppBar配置
  body: SafeArea(
    child: Container(
      // 保留你原来的Container属性
      child: Column(
        // 保留你原来的Column属性
        children: [
          InkWell(...), // 保留原来的InkWell组件
          Card(...),    // 保留原来的Card组件
          // 这里移除原来的广告Container
        ],
      ),
    ),
  ),
  // 新增bottomNavigationBar来放广告
  bottomNavigationBar: Container(
    // 替换成你自己的广告容器样式和内容
    height: 60,
    color: Colors.grey[100],
    child: Center(child: Text("这里是广告横幅")),
  ),
);

如果担心广告被系统UI遮挡，或者想加个底部间距，可以给广告Container套个SafeArea和Padding：

bottomNavigationBar: SafeArea(
  child: Padding(
    padding: const EdgeInsets.only(bottom: 4.0),
    child: Container(
      // 你的广告内容
    ),
  ),
),

方法二：随内容滚动，显示在内容底部 #

如果你希望广告跟着body内容滚动，停在内容的最底部（而不是固定在屏幕），那可以用Expanded组件把Card和InkWell包起来，让它们占满Column的剩余空间，这样广告就会被挤到Column的底部位置。

修改后的代码示例：

Scaffold(
  appBar: AppBar(...),
  body: SafeArea(
    child: Container(
      // 保留原来的Container属性
      child: Column(
        // 让Column占满父容器高度
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: Column(
              children: [
                InkWell(...),
                Card(...),
              ],
            ),
          ),
          // 广告Container放在Expanded后面
          Container(
            // 你的广告容器样式和内容
            height: 60,
            color: Colors.grey[100],
            child: Center(child: Text("这里是广告横幅")),
          ),
        ],
      ),
    ),
  ),
);

要是你的body内容是可滚动的（比如用ListView），只要把ListView放到Expanded里，广告同样会乖乖待在内容底部哦～

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