Flutter圆角TabBar实现：弧形边框+点击Tab移至左侧首位

实现思路 #

1. 用Container包裹TabBar，通过BoxDecoration设置圆角边框，限制边框仅作用于圆角区域。
2. 为不同状态的Tab配置差异化文本颜色，实现Pending/Upcoming/Past的样式区分。
3. 自定义TabBar指示器的圆角，与外层容器保持视觉统一，避免内容溢出圆角范围。

代码实现 #

import 'package:flutter/material.dart';

class StyledRoundedTabBar extends StatefulWidget {
  const StyledRoundedTabBar({super.key});

  @override
  State<StyledRoundedTabBar> createState() => _StyledRoundedTabBarState();
}

class _StyledRoundedTabBarState extends State<StyledRoundedTabBar> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<Map<String, dynamic>> _tabConfigs = [
    {'title': 'Pending', 'color': Colors.redAccent},
    {'title': 'Upcoming', 'color': Colors.amber},
    {'title': 'Past', 'color': Colors.grey},
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabConfigs.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.grey.shade300, width: 1),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(12),
        child: TabBar(
          controller: _tabController,
          isScrollable: true,
          indicator: BoxDecoration(
            color: Colors.blue.shade50,
            borderRadius: BorderRadius.circular(12),
          ),
          labelColor: Colors.blue,
          unselectedLabelColor: Colors.black87,
          tabs: _tabConfigs.map((config) {
            return Tab(
              child: Text(
                config['title'],
                style: TextStyle(
                  color: config['color'],
                  fontWeight: FontWeight.w500,
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

关键说明 #

• ClipRRect配合外层Container的圆角，确保TabBar内容不会超出边框范围。
• 通过_tabConfigs统一管理不同状态Tab的样式，便于后续扩展修改。
• 自定义指示器的圆角与容器一致，保持整体视觉协调性。

实现思路 #

1. 维护可变的Tab列表，用于动态调整顺序。
2. 在TabBar的onTap回调中，将点击的Tab元素移至列表首位，通过setState更新UI。
3. 重新初始化TabController并设置初始索引为0，确保选中新的首位Tab。

代码实现 #

import 'package:flutter/material.dart';

class ReorderableTabBar extends StatefulWidget {
  const ReorderableTabBar({super.key});

  @override
  State<ReorderableTabBar> createState() => _ReorderableTabBarState();
}

class _ReorderableTabBarState extends State<ReorderableTabBar> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late List<String> _tabs;

  @override
  void initState() {
    super.initState();
    _tabs = List.generate(8, (index) => 'Tab ${index + 1}');
    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  void _handleTabTap(int index) {
    if (index == 0) return; // 已是首位，无需调整
    setState(() {
      // 调整Tab顺序
      final selectedTab = _tabs.removeAt(index);
      _tabs.insert(0, selectedTab);
      // 重新初始化控制器适配新顺序
      _tabController.dispose();
      _tabController = TabController(length: _tabs.length, vsync: this, initialIndex: 0);
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: TabBar(
        controller: _tabController,
        isScrollable: true,
        onTap: _handleTabTap,
        indicatorColor: Colors.blue,
        tabs: _tabs.map((title) => Tab(text: title)).toList(),
      ),
    );
  }
}

关键说明 #

• 加入首位判断避免无效操作，提升性能。
• isScrollable: true确保8个Tab可横向滚动，避免布局溢出。
• 重新初始化TabController是为了让控制器与新的Tab顺序同步。

如果需要同时实现样式定制和Tab重排功能，可合并上述代码：

import 'package:flutter/material.dart';

class CustomTabBar extends StatefulWidget {
  const CustomTabBar({super.key});

  @override
  State<CustomTabBar> createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late List<Map<String, dynamic>> _tabItems;

  @override
  void initState() {
    super.initState();
    _tabItems = [
      {'title': 'Pending', 'color': Colors.redAccent},
      {'title': 'Upcoming', 'color': Colors.amber},
      {'title': 'Past', 'color': Colors.grey},
      {'title': 'Tab4', 'color': Colors.black87},
      {'title': 'Tab5', 'color': Colors.black87},
      {'title': 'Tab6', 'color': Colors.black87},
      {'title': 'Tab7', 'color': Colors.black87},
      {'title': 'Tab8', 'color': Colors.black87},
    ];
    _tabController = TabController(length: _tabItems.length, vsync: this);
  }

  void _handleTabTap(int index) {
    if (index == 0) return;
    setState(() {
      final selectedItem = _tabItems.removeAt(index);
      _tabItems.insert(0, selectedItem);
      _tabController.dispose();
      _tabController = TabController(length: _tabItems.length, vsync: this, initialIndex: 0);
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.grey.shade300, width: 1),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(12),
        child: TabBar(
          controller: _tabController,
          isScrollable: true,
          onTap: _handleTabTap,
          indicator: BoxDecoration(
            color: Colors.blue.shade50,
            borderRadius: BorderRadius.circular(12),
          ),
          labelColor: Colors.blue,
          unselectedLabelColor: Colors.black87,
          tabs: _tabItems.map((item) {
            return Tab(
              child: Text(
                item['title'],
                style: TextStyle(
                  color: item['color'],
                  fontWeight: FontWeight.w500,
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

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