Flutter如何自定义TabBar

在Flutter中如何实现自定义TabBar的样式？我想修改TabBar的背景颜色、标签文字样式以及指示器形状，但官方文档没有详细的例子。尝试过直接修改TabBar的属性，但效果不太理想，特别是想实现圆角指示器时遇到困难。有没有比较完整的自定义方案或第三方库推荐？最好能提供具体的代码示例。

2 回复

在Flutter中自定义TabBar，可通过TabBar的indicator和labelStyle等属性调整样式。例如，使用indicator设置下划线颜色和形状，labelStyle修改文字样式。也可用Tab自定义每个标签的内容和样式。

更多关于Flutter如何自定义TabBar的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，自定义TabBar主要通过以下方式实现：

1. 使用TabBar的默认属性

TabBar(
  tabs: [
    Tab(text: '标签1'),
    Tab(text: '标签2'),
  ],
  labelColor: Colors.blue,        // 选中标签颜色
  unselectedLabelColor: Colors.grey, // 未选中标签颜色
  indicatorColor: Colors.blue,     // 指示器颜色
  indicatorWeight: 3.0,           // 指示器厚度
  indicatorPadding: EdgeInsets.symmetric(horizontal: 20), // 指示器内边距
  labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
  unselectedLabelStyle: TextStyle(fontSize: 14),
)

2. 完全自定义指示器

TabBar(
  tabs: [
    Tab(text: '首页'),
    Tab(text: '发现'),
    Tab(text: '我的'),
  ],
  indicator: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(color: Colors.grey, blurRadius: 4)
    ],
  ),
  labelColor: Colors.white,
  unselectedLabelColor: Colors.black87,
)

3. 自定义Tab样式

TabBar(
  tabs: [
    Tab(
      icon: Icon(Icons.home),
      text: '首页',
    ),
    Tab(
      icon: Icon(Icons.search),
      text: '搜索',
    ),
  ],
  indicator: CircleTabIndicator(
    color: Colors.blue,
    radius: 4,
  ),
)

// 自定义圆形指示器
class CircleTabIndicator extends Decoration {
  final Color color;
  final double radius;
  
  const CircleTabIndicator({required this.color, required this.radius});
  
  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _CirclePainter(color: color, radius: radius);
  }
}

class _CirclePainter extends BoxPainter {
  final Color color;
  final double radius;
  
  _CirclePainter({required this.color, required this.radius});
  
  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Paint paint = Paint()..color = color;
    final Offset circleOffset = offset + Offset(cfg.size!.width / 2, cfg.size!.height - radius);
    canvas.drawCircle(circleOffset, radius, paint);
  }
}

4. 完整示例

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text('自定义TabBar'),
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.home), text: '首页'),
          Tab(icon: Icon(Icons.business), text: '商业'),
          Tab(icon: Icon(Icons.school), text: '学校'),
        ],
        indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 3.0, color: Colors.red),
          insets: EdgeInsets.symmetric(horizontal: 20.0),
        ),
        labelColor: Colors.red,
        unselectedLabelColor: Colors.grey,
        labelStyle: TextStyle(fontWeight: FontWeight.bold),
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('首页内容')),
        Center(child: Text('商业内容')),
        Center(child: Text('学校内容')),
      ],
    ),
  ),
);

主要自定义属性：

  • indicator: 自定义指示器样式
  • indicatorColor/Weight/Padding: 指示器基础样式
  • labelColor/Style: 选中标签样式
  • unselectedLabelColor/Style: 未选中标签样式
  • tabs: 标签内容，支持任意Widget

通过这些方式可以灵活定制TabBar的外观和交互效果。

回到顶部