Flutter如何在底部导航栏下方创建横幅广告位

核心思路很简单：不需要改动Scaffold的body结构，直接把现有bottomNavigationBar下的内容改成垂直列布局，上半部分放原有的导航栏，下半部分放广告位即可，系统会自动给页面内容预留底部总高度，不会出现内容被遮挡的问题。

关键注意点 #

• 列布局必须设置mainAxisSize: MainAxisSize.min，否则会撑满整个屏幕剩余高度，导致布局错乱
• 外层已经套了SafeArea，不用额外处理异形屏、全面屏的底部安全边距
• 广告位高度建议按你接入的广告SDK要求设置，常规横幅广告高度在50~60区间即可
• 横屏状态（你代码里的rotated判断）如果不需要显示广告，现有逻辑已经自动隐藏整个底部栏，不需要额外加判断

修改后完整代码 #

直接替换你原来的bottomNavigationBar配置即可，原有导航逻辑完全保留：

bottomNavigationBar: rotated
            ? null
            : SafeArea(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    // 原有底部导航栏，逻辑无改动
                    ValueListenableBuilder(
                      valueListenable: _selectedIndex,
                      builder:
                          (BuildContext context, int indexValue, Widget child) {
                        return AnimatedContainer(
                          duration: const Duration(milliseconds: 100),
                          height: 60,
                          child: SalomonBottomBar(
                            currentIndex: indexValue,
                            onTap: (index) {
                              _onItemTapped(index);
                            },
                            items: [
                              SalomonBottomBarItem(
                                icon: const Icon(Icons.home_rounded),
                                title: Text(AppLocalizations.of(context)!.home),
                                selectedColor:
                                    Theme.of(context).colorScheme.secondary,
                              ),
                              SalomonBottomBarItem(
                                icon: const Icon(MdiIcons.music),
                                title: Text(AppLocalizations.of(context)!.myMusic),
                                selectedColor:
                                    Theme.of(context).colorScheme.secondary,
                              ),
                              SalomonBottomBarItem(
                                icon: const Icon(Icons.equalizer),
                                title: Text(
                                  AppLocalizations.of(context)!.equalizer,
                                ),
                                selectedColor:
                                    Theme.of(context).colorScheme.secondary,
                              ),
                              SalomonBottomBarItem(
                                icon: const Icon(Icons.my_library_music_rounded),
                                title: Text(AppLocalizations.of(context)!.library),
                                selectedColor:
                                    Theme.of(context).colorScheme.secondary,
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                    // 新增广告展示区域
                    Container(
                      height: 50,
                      width: double.infinity,
                      alignment: Alignment.center,
                      // 加顶部分割线和导航栏做视觉区隔，不需要可以去掉
                      decoration: BoxDecoration(
                        border: Border(
                          top: BorderSide(
                            color: Theme.of(context).dividerColor,
                            width: 0.5,
                          ),
                        ),
                      ),
                      // 这里替换成你接入的广告SDK提供的横幅广告组件即可
                      child: const Text("广告位"),
                    ),
                  ],
                ),
              ),

可选优化 #

• 广告加载逻辑可以加状态监听：广告加载失败时，把广告容器高度设为0，不占用底部空间
• 可以给广告区域加AnimatedOpacity或者和导航栏一致的AnimatedContainer动画，避免广告加载完成后突然弹出的突兀感
• 如果需要支持广告关闭功能，点击关闭按钮后直接把广告组件从Column里移除，或者用Visibility组件隐藏即可

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