Flutter中如何在不修改AppBar的情况下更改TabBar的背景色？

嘿，这个问题我刚好踩过坑，其实不用改动AppBar本身的属性，就能轻松给TabBar设置单独的背景色，下面是几个亲测有效的方案：

方法一：用Container直接包裹TabBar #

这是最简单直接的方式——TabBar本身是可被嵌套的Widget，我们只需要把它放到一个设置了背景色的Container里，再把这个Container作为AppBar的bottom属性值即可，完全不会影响AppBar的其他部分。

示例代码：

AppBar(
  title: const Text('TabBar背景色演示'),
  // 用Container包裹TabBar来设置背景色
  bottom: Container(
    color: Colors.orangeAccent, // 你想要的TabBar背景色
    child: TabBar(
      tabs: const [
        Tab(text: '首页'),
        Tab(text: '我的'),
        Tab(text: '设置'),
      ],
      labelColor: Colors.white, // 选中标签的文字颜色
      unselectedLabelColor: Colors.grey[200], // 未选中标签的文字颜色
    ),
  ),
)

方法二：自定义PreferredSizeWidget（更灵活） #

如果需要对TabBar的高度、额外装饰（比如阴影）做自定义，推荐用这种方式。我们可以自己实现一个PreferredSizeWidget，内部包含带背景色的Container和TabBar，再把它传给AppBar的bottom。

示例代码：

AppBar(
  title: const Text('自定义TabBar背景'),
  bottom: _buildCustomTabBar(),
)

// 自定义PreferredSizeWidget
PreferredSizeWidget _buildCustomTabBar() {
  return PreferredSize(
    // 设置和默认TabBar一致的高度，也可以自行调整
    preferredSize: const Size.fromHeight(kToolbarHeight),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.teal,
        // 给TabBar加个阴影增强层次感
        boxShadow: const [
          BoxShadow(
            color: Colors.grey,
            blurRadius: 3.0,
            offset: Offset(0, 1),
          ),
        ],
      ),
      child: TabBar(
        tabs: const [
          Tab(text: '动态'),
          Tab(text: '收藏'),
        ],
        labelColor: Colors.white,
      ),
    ),
  );
}

补充说明 #

这两种方案的核心思路都是给TabBar套一个父容器来设置背景——因为TabBar本身确实没有直接的background属性，但它作为Widget可以被任意父Widget嵌套，利用这一点就能实现我们想要的效果，而且完全不需要修改AppBar的任何属性，完美符合你的需求~

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