使用go_router时如何为Flutter AppBar添加操作图标？

你遇到的问题很常见——用go_router时，MaterialApp.router确实没有直接设置AppBar操作图标的入口，因为AppBar是页面级组件，不属于全局路由配置的范畴。下面给你两种可行的解决思路：

方案一：在单个页面的AppBar中配置操作图标 #

每个页面的Scaffold可以独立设置AppBar，直接在目标页面的AppBar的actions属性里添加操作图标即可。比如你的Home页面可以这样修改：

class Home extends StatelessWidget {
  final Map data;
  const Home({super.key, required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('首页'),
        // 在这里添加操作图标
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              // 搜索操作逻辑
            },
          ),
          IconButton(
            icon: const Icon(Icons.more_vert),
            onPressed: () {
              // 更多操作逻辑
            },
          ),
        ],
      ),
      body: // 页面主体内容
    );
  }
}

这种方式适合不同页面需要不同操作图标的场景，灵活性高。

方案二：用ShellRoute实现全局统一的AppBar #

如果所有页面都需要相同的操作图标，可以用go_router的ShellRoute来包裹所有路由，实现全局共享的AppBar：

修改你的路由配置：

final GoRouter _router = GoRouter(
  routes: [
    ShellRoute(
      builder: (context, state, child) {
        return Scaffold(
          appBar: AppBar(
            title: Text(state.location == '/home' ? '首页' : '其他页面'),
            actions: [
              IconButton(
                icon: const Icon(Icons.notifications),
                onPressed: () {
                  // 通知操作逻辑
                },
              ),
            ],
          ),
          body: child, // child是当前路由对应的页面组件
        );
      },
      routes: [
        GoRoute(path: '/', builder: ((context, state) => Loading())),
        GoRoute(
          name: 'error',
          path: '/error/:message/:statusCode',
          builder: (context, state) => CheckError(
            message: state.params['message']!,
            statusCode: state.params['statusCode']!
          )
        ),
        GoRoute(
          name: 'home',
          path: '/home',
          builder: (context, state) {
            Map data = state.extra as Map;
            return Home(data: data);
          },
        ),
      ],
    ),
  ],
);

注意：使用ShellRoute后，子页面就不需要再单独设置Scaffold和AppBar了（如果不需要覆盖全局AppBar的话），直接返回页面主体内容即可。

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