Flutter开发：如何实现始终显示在底部的Widget？

要实现指定Widget（比如底部横幅广告）在Navigator.push()跳转后仍固定在屏幕底部，核心是把广告组件放在Navigator的外层，而非单个页面内部。这样所有通过该Navigator跳转的页面都会在广告上方渲染，广告不受页面导航影响。

下面提供两种实用的实现方式：

方式一：用Scaffold的bottomNavigationBar（推荐） #

直接将广告作为Scaffold的bottomNavigationBar，把自定义Navigator作为Scaffold的body。Scaffold会自动处理页面内容与底部区域的间距，无需手动设置内边距：

class RootScreen extends StatelessWidget {
  final _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: _navigatorKey,
        initialRoute: '/home',
        onGenerateRoute: (settings) {
          switch (settings.name) {
            case '/home':
              return MaterialPageRoute(builder: (_) => HomePage());
            case '/detail':
              return MaterialPageRoute(builder: (_) => DetailPage());
            default:
              return MaterialPageRoute(builder: (_) => HomePage());
          }
        },
      ),
      // 固定底部的横幅广告
      bottomNavigationBar: Container(
        height: 56,
        color: Colors.grey[200],
        child: Center(child: Text('底部横幅广告')),
      ),
    );
  }
}

跳转页面时，使用自定义Navigator的key来触发：

// 在页面内部跳转
_navigatorKey.currentState?.pushNamed('/detail');

方式二：Stack布局（灵活层级控制） #

如果需要更灵活的UI层级，可以用Stack包裹Navigator和广告组件，手动控制广告位置，并给页面添加底部内边距避免内容被遮挡：

class RootScreen extends StatelessWidget {
  final _navigatorKey = GlobalKey<NavigatorState>();
  final _adHeight = 56.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 页面导航容器
        Navigator(
          key: _navigatorKey,
          initialRoute: '/home',
          onGenerateRoute: (settings) {
            return MaterialPageRoute(builder: (_) {
              // 给页面添加底部内边距，避开广告区域
              return Padding(
                padding: EdgeInsets.only(bottom: _adHeight),
                child: _buildPage(settings.name),
              );
            });
          },
        ),
        // 固定在底部的广告
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          height: _adHeight,
          child: Container(
            color: Colors.grey[200],
            child: Center(child: Text('底部横幅广告')),
          ),
        ),
      ],
    );
  }

  Widget _buildPage(String? routeName) {
    switch (routeName) {
      case '/home':
        return HomePage();
      case '/detail':
        return DetailPage();
      default:
        return HomePage();
    }
  }
}

关键注意点 #

• 所有页面跳转必须使用自定义Navigator的key来操作，不能用默认的Navigator.of(context)，否则会跳转到外层Navigator（如果有的话）。
• 如果用Stack方式，一定要给所有页面添加底部内边距，不然页面底部内容会被广告挡住。
• 广告组件的交互逻辑（比如点击跳转）可以直接在内部实现，不会和页面导航冲突。

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