Flutter中如何为Slivers内的TabBar组件适配明暗主题背景色？

首先明确：TabBarTheme并没有提供backgroundColor的配置项，所以你之前通过TabBarTheme只能配置文字、指示器颜色，背景色需要单独处理。另外TabBar默认不会直接使用primaryColor，这就是你修改primaryColor无效的原因，和是否嵌套在Slivers里无关，但嵌套场景下需要确保设置方式正确。

两种可行的解决方式： #

方式一：通过主题的ColorScheme统一管理背景色

先在明暗主题的ThemeData中配置对应颜色，再在TabBar中动态读取：

更新后的深色主题配置

darkTheme: ThemeData(
  colorScheme: const ColorScheme.dark(
    surface: colorBlackBg, // 指定深色模式下TabBar的背景色
  ),
  tabBarTheme: const TabBarTheme(
    labelColor: colorOffWhite,
    indicatorColor: colorBlackBg,
    unselectedLabelColor: disabledTextColor,
  ),
),

更新后的浅色主题配置

lightTheme: ThemeData(
  colorScheme: const ColorScheme.light(
    surface: colorOffWhite, // 指定浅色模式下TabBar的背景色
  ),
  tabBarTheme: const TabBarTheme(
    labelColor: colorBlackBg,
    indicatorColor: colorBlackBg,
    unselectedLabelColor: disabledTextColor,
  ),
),

然后在Slivers中的TabBar里设置：

SliverAppBar(
  title: const Text('页面标题'),
  pinned: true,
  bottom: TabBar(
    backgroundColor: Theme.of(context).colorScheme.surface, // 动态读取主题配置的颜色
    tabs: const [
      Tab(text: '标签A'),
      Tab(text: '标签B'),
    ],
  ),
),

方式二：直接根据主题亮度判断设置

如果不想修改ColorScheme，也可以直接通过当前主题的亮度值来切换背景色：

SliverAppBar(
  bottom: TabBar(
    backgroundColor: Theme.of(context).brightness == Brightness.dark
        ? colorBlackBg
        : colorOffWhite,
    tabs: const [
      Tab(text: '标签1'),
      Tab(text: '标签2'),
    ],
  ),
),

补充说明 #

之前修改primaryColor无效，是因为TabBar的backgroundColor默认继承的是Theme的canvasColor（旧版Flutter）或colorScheme.surface（新版Flutter），和primaryColor没有直接关联，所以调整primaryColor不会影响TabBar背景。

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