如何实现Flutter（Web）全局固定显示的AppBar？

要实现Web端全局固定的AppBar，核心思路是让AppBar脱离页面路由层级，不随页面切换被替换。以下是两种实用的实现方式：

方案一：根Scaffold包裹全局AppBar，用嵌套Navigator管理页面 #

这是最直接且推荐的方案：将全局AppBar放在根Scaffold中，把页面路由的管理交给根Scaffold的body里的Navigator，子页面不再单独设置AppBar。

代码示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '全局固定AppBar示例',
      home: Scaffold(
        // 全局固定的AppBar，始终显示
        appBar: AppBar(
          title: const Text('Web全局导航'),
          actions: [
            IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {},
            ),
          ],
        ),
        // 用嵌套Navigator管理所有页面路由
        body: Navigator(
          initialRoute: '/',
          onGenerateRoute: (settings) {
            Widget page;
            switch (settings.name) {
              case '/':
                page = const HomePage();
                break;
              case '/product-detail':
                // 可以通过arguments传递参数
                final productId = settings.arguments as String?;
                page = ProductDetailPage(productId: productId);
                break;
              default:
                page = const HomePage();
            }
            return MaterialPageRoute(builder: (_) => page);
          },
        ),
      ),
    );
  }
}

// 首页：无需嵌套Scaffold（或嵌套但不设置appBar）
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          // 跳转到详情页，使用当前Navigator上下文
          Navigator.of(context).pushNamed('/product-detail', arguments: '123');
        },
        child: const Text('查看商品详情'),
      ),
    );
  }
}

// 详情页：同样无需设置AppBar
class ProductDetailPage extends StatelessWidget {
  final String? productId;
  const ProductDetailPage({super.key, this.productId});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('商品ID：$productId'),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text('返回首页'),
          ),
        ],
      ),
    );
  }
}

原理说明 #

根Scaffold的AppBar属于全局层级，不会被页面路由的切换影响；所有页面的切换都在body内的Navigator中完成，子页面无需再添加AppBar，自然不会覆盖全局导航栏。

方案二：自定义路由，移除子页面的AppBar #

如果你的项目已经有大量带AppBar的页面，不想大规模重构，可以通过自定义路由，自动移除子页面Scaffold的AppBar：

class NoAppBarRoute<T> extends MaterialPageRoute<T> {
  NoAppBarRoute({required WidgetBuilder builder}) : super(builder: builder);

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    final originalPage = super.buildPage(context, animation, secondaryAnimation);
    // 若子页面是Scaffold，仅保留body等内容，移除AppBar
    if (originalPage is Scaffold) {
      return Scaffold(
        body: originalPage.body,
        floatingActionButton: originalPage.floatingActionButton,
        bottomNavigationBar: originalPage.bottomNavigationBar,
        // 根据需求保留其他Scaffold属性，排除appBar即可
      );
    }
    return originalPage;
  }
}

// 使用方式
Navigator.push(
  context,
  NoAppBarRoute(builder: (_) => const ExistingDetailPage()),
);

注意事项 #

这个方案适合临时过渡，若子页面的Scaffold有复杂配置（比如drawer、bottomSheet等），需要手动在自定义路由中保留对应属性，否则会丢失。

关于IndexedStack失效的原因 #

你之前尝试的IndexedStack仅适合同级页面切换（如底部导航栏的首页/我的/消息页），它本质是通过切换显示的子组件来实现页面切换，没有维护路由栈。当从IndexedStack内的页面触发深层路由跳转（比如首页→详情页）时，新页面会脱离IndexedStack的层级，导致全局AppBar失效，因此不适合Web端的深层路由场景。

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