Flutter自定义TabBar主题色轻松实现，拒绝千篇一律！

Android

2024-01-03 17:31:33

自定义 Flutter TabBar 组件：打造个性化的标签主题色

什么是 Flutter TabBar 组件？

Flutter TabBar 组件是一种功能强大的工具，可创建底部导航栏或选项卡式界面。它与 TabBarView 组件协同工作，后者负责显示各个选项卡的内容。TabBar 组件具有各种可自定义属性，包括标签颜色、指示器等。

默认主题色限制

尽管 Flutter 提供了丰富的 TabBar 定制选项，但它限制了每个标签的主题色设置。默认情况下，只能设置选中和未选中标签的颜色。为了实现每个标签具有不同的主题色，需要进行自定义开发。

自定义 TabBar 组件

要自定义 TabBar 组件，需要继承自 Flutter 提供的默认组件。在自定义组件中，可以添加一个新属性来指定每个标签的主题色。

class CustomTabBar extends TabBar {
  final List<Color> tabColors;

  const CustomTabBar({
    Key? key,
    required this.tabColors,
    required TabController controller,
    required List<Widget> tabs,
    TabBarIndicator? indicator,
    Color? labelColor,
    Color? unselectedLabelColor,
  }) : super(
    key: key,
    controller: controller,
    tabs: tabs,
    indicator: indicator,
    labelColor: labelColor,
    unselectedLabelColor: unselectedLabelColor,
  );

  @override
  Widget build(BuildContext context) {
    return TabBar(
      controller: controller,
      tabs: tabs,
      indicator: indicator,
      labelColor: labelColor,
      unselectedLabelColor: unselectedLabelColor,
      onTap: (index) {
        super.onTap(index);
        for (var i = 0; i < tabs.length; i++) {
          if (i == index) {
            tabs[i] = Tab(
              child: Text(
                tabs[i].text,
                style: TextStyle(color: tabColors[i]),
              ),
            );
          } else {
            tabs[i] = Tab(
              child: Text(
                tabs[i].text,
                style: TextStyle(color: unselectedLabelColor),
              ),
            );
          }
        }
        setState(() {});
      },
    );
  }
}

使用自定义 TabBar 组件

在应用中使用自定义 TabBar 组件时，需要传入组件并指定每个标签的主题色。

CustomTabBar(
  tabColors: [
    Colors.red,
    Colors.green,
    Colors.blue,
  ],
  controller: TabController(length: 3),
  tabs: [
    Tab(text: '红色'),
    Tab(text: '绿色'),
    Tab(text: '蓝色'),
  ],
);