Flutter自定义AppBar添加TabBar报参数类型不匹配错误如何解决

• 核心原因：你自定义的CoustomAppBar组件未声明bottom参数，或bottom参数的类型被定义为String，传入TabBar类型组件时触发类型不匹配报错。
• 附带问题1：自定义AppBar的类名拼写错误，Custom被误写为Coustom，可能调用到错误的组件定义。
• 附带问题2：DefaultTabController设置的length为4，但TabBar内仅定义了3个Tab，参数对齐错误后续也会触发运行报错。

1. 首先修改自定义CustomAppBar的代码，补充正确的bottom参数定义，同时自定义AppBar需要实现PreferredSizeWidget接口才能被Scaffold的appBar参数接收，参考代码：

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  // 补充bottom参数，类型和系统原生AppBar保持一致为PreferredSizeWidget，设为可选
  final PreferredSizeWidget? bottom;
  
  const CustomAppBar({super.key, required this.title, this.bottom});

  // 计算AppBar总高度，把bottom组件的高度包含在内
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight + (bottom?.preferredSize.height ?? 0));

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      // 将传入的bottom赋值给原生AppBar的bottom属性
      bottom: bottom,
      // 保留你原有CustomAppBar的其他样式配置
    );
  }
}

2. 修正调用时的类名拼写错误，把CoustomAppBar改为正确的CustomAppBar。
3. 对齐Tab数量和DefaultTabController的length参数：要么将length改为3，要么补充1个Tab组件。
4. 修正后的调用代码示例：

return DefaultTabController(
  // 和Tab数量对齐改为3
  length: 3,
  child: Scaffold(
    // 修正拼写错误
    appBar: CustomAppBar(
      title: 'Leaves',
      bottom:TabBar(
        tabs: const <Widget>[
          Tab(icon: Icon(Icons.cake)),
          Tab(icon: Icon(Icons.android)),
          Tab(icon: Icon(Icons.phone_android)),
        ],
      ),
    ),
    // 其余原有业务代码保持不变
  )
);

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