Flutter自定义AppBar时List<dynamic>无法赋值给列表类型错误如何解决

错误根因 #

• 泛型声明缺失：你定义的tabs属性未指定泛型，默认是List<dynamic>类型，而TabBar的tabs参数要求传入List<Widget>类型的值，类型不匹配触发报错
• 赋值语法错误：你写的tabs: <Widget>[tabs]是将整个tabs列表作为单个元素塞入新数组，相当于生成了List<List<dynamic>>类型的嵌套列表，完全不符合参数要求
• 未声明变量引用：代码中使用的widget.tabbarenable没有在BottomOfAppBar类中定义，会触发额外的未定义报错
• 当前代码用了GetX的Obx响应式包裹，普通bool类型变量无法触发响应式刷新，需要配合GetX响应式类型使用，不需要响应式的话可以去掉Obx包裹减少性能消耗

修复步骤 #

1. 给tabs属性指定泛型为List<Widget>，同时补全tabbarenable属性的声明，根据业务需求选择普通bool类型或者GetX的RxBool响应式类型
2. 去掉TabBar的tabs参数赋值时多余的外层[]，直接传入tabs变量即可

修复后完整代码 #

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class BottomOfAppBar extends StatelessWidget implements PreferredSizeWidget {
  // 构造函数支持两种声明方式，按需选择
  BottomOfAppBar({
    Key? key,
    required this.tabs,
    // 非响应式控制显隐写法，默认开启tabbar
    this.tabbarenable = true,
    // 若需要响应式控制显隐，用下面的声明替换上面的tabbarenable声明
    // required this.tabbarenable,
  }) : super(key: key);

  final List<Widget> tabs;
  final bool tabbarenable;
  // 响应式声明写法：final RxBool tabbarenable;

  @override
  Widget build(BuildContext context) {
    // 如果用非响应式的普通bool，直接去掉Obx包裹即可
    return Obx(() => Container(
          child: ColoredBox(
            color: Colors.white,
            child: Column(
              children: [
                // 普通bool直接用变量判断即可
                tabbarenable
                // 响应式变量需要取value判断：tabbarenable.value
                    ? TabBar(
                        labelColor: Colors.purple[100],
                        indicatorColor: Colors.purple,
                        isScrollable: true,
                        labelPadding:
                            const EdgeInsets.symmetric(horizontal: 8.0),
                        // 直接传入tabs变量即可
                        tabs: tabs)
                    : const SizedBox.shrink() // 比空Container性能更优
              ],
            ),
          ),
        ));
  }

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

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