Flutter自定义TopAppBar组件传参报错，如何修复？

错误原因 #

1. 自定义TopAppBar组件声明的必填参数是ABTitle，但调用时你写的是title，参数名称不匹配，导致Flutter找不到对应参数
2. 组件期望接收String类型的文本，但你传递的是Text("Home Page")这个Widget，类型不匹配

修复方案 #

直接修正调用代码的参数名和参数类型即可：

// 修改HomeScreen中的appBar调用部分
appBar: TopAppBar(ABTitle: "Home Page"),

扩展：实现动态修改标题 #

如果要实现点击tile时动态修改标题，你需要：

1. 在_HomeScreenState中声明一个存储标题的状态变量
2. 点击tile时调用setState更新该变量
3. 将变量传递给TopAppBar的ABTitle参数

示例代码：

class _HomeScreenState extends State<HomeScreen> {
  int selectedPage = 0;
  // 新增标题状态变量
  String currentTitle = "Home Page";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: TopAppBar(ABTitle: currentTitle),
      body: ListView(
        children: [
          // 示例tile，点击修改标题
          ListTile(
            title: const Text("切换到数据页"),
            onTap: () {
              setState(() {
                currentTitle = "数据详情";
              });
            },
          ),
          ListTile(
            title: const Text("切换到首页"),
            onTap: () {
              setState(() {
                currentTitle = "Home Page";
              });
            },
          ),
        ],
      ),
      bottomNavigationBar: BottomNav(
        selectedPage: selectedPage,
        onDestinationSelected: (index) {
          setState(() {
            selectedPage = index;
          });
        },
      ),
    );
  }
}

可选优化：统一参数命名 #

为了符合Flutter的命名习惯，建议把组件的ABTitle参数改成title，调用时更直观：
修改TopAppBar组件代码：

class TopAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title; // 改成title

  const TopAppBar({
    super.key,
    required this.title, // 对应修改
  });

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

  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: Colors.amber,
      title: Text(title), // 直接用title
    );
  }
}

之后调用就可以写成：

appBar: TopAppBar(title: currentTitle),

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