Flutter 如何实现标题可变的通用持久化 AppBar 规避重复编码

方案1：封装通用自定义AppBar组件（最适合当前场景，改造成本最低） #

思路是把统一的返回首页按钮逻辑、基础样式都封装到自定义的CustomAppBar组件中，仅暴露标题、可选配置参数给业务页面调用，完全避免重复代码：

import 'package:flutter/material.dart';

class CustomAppBar extends PreferredSizeWidget {
  // 业务页面可自定义的参数
  final String title;
  final List<Widget>? actions; // 可选：页面专属的右侧操作按钮
  final bool showHomeButton; // 可选：个别不需要返回首页按钮的页面可设为false

  const CustomAppBar({
    super.key,
    required this.title,
    this.actions,
    this.showHomeButton = true,
  });

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      // 统一配置返回首页逻辑
      leading: showHomeButton ? IconButton(
        icon: const Icon(Icons.home),
        onPressed: () {
          // 命名路由场景下的返回首页逻辑，把'/home'替换成你项目的首页路由名即可
          Navigator.pushNamedAndRemoveUntil(context, '/home', (route) => false);
          // 普通路由跳转场景用下面这行，直接退到路由栈第一个页面
          // Navigator.of(context).popUntil((route) => route.isFirst);
        },
      ) : null,
      actions: actions,
      // 其他全局统一的AppBar样式都可以在这里配置，后续修改仅需改一处
      backgroundColor: Colors.blue,
      titleTextStyle: const TextStyle(color: Colors.white, fontSize: 18),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

业务页面使用方式：
原来每个页面单独定义的AppBar直接替换即可，仅需传标题参数：

// 改造前页面的AppBar写法
// appBar: AppBar(title: Text("设置页")),

// 改造后写法
appBar: const CustomAppBar(title: "设置页"),

// 需要加右侧专属操作按钮的页面写法
appBar: CustomAppBar(
  title: "个人中心页",
  actions: [
    IconButton(icon: const Icon(Icons.edit), onPressed: () {}),
  ],
),

方案2：路由统一注入（适合已用路由框架的大型项目） #

如果你的项目已经接入了GoRouter、Fluro等路由管理框架，可以用更低侵入性的方式实现：

• 定义统一的AppBar生成函数，接收标题参数返回配置好的AppBar
• 在路由表注册每个页面时，同步录入对应页面的标题，路由框架生成页面时自动拼接统一AppBar
• 优势是后续修改AppBar全局逻辑完全不需要改动任何业务页面代码

注意事项 #

• 个别需要完全自定义AppBar的页面，不引用CustomAppBar即可，不会和全局逻辑冲突
• 可以根据业务需求给CustomAppBar扩展更多可选参数，比如是否隐藏默认返回键、自定义背景色等，适配特殊页面的差异化需求

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