如何修复Flutter TabBar中边框相互覆盖的问题？

方案一：控制自定义Tab的边框显示范围 #

你的问题出在前四个自定义Tab都带有右侧灰色边框，导致第四个Tab（30M）的边框覆盖了相邻区域的Indicator。可以让前三个自定义Tab显示右侧边框，第四个不显示：

1. 修改_tab方法，增加是否显示边框的参数：

Widget _tab(String text, {bool showRightBorder = true}) {
  return Container(
    height: 16,
    padding: const EdgeInsets.all(0),
    width: double.infinity,
    decoration: BoxDecoration(
      border: showRightBorder 
          ? const Border(right: BorderSide(color: Color(0xFF454545), width: 1))
          : null,
    ),
    child: Tab(text: text),
  );
}

2. 在TabBar的tabs列表中，给第四个自定义Tab传入showRightBorder: false：

TabBar(
  indicatorPadding: EdgeInsets.symmetric(vertical: 10),
  indicator: ShapeDecoration(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(5)),
      side: BorderSide(color: Colors.white)),
    color: Color(0xFF1C1B20),
  ),
  labelColor: AppColors.whiteE3EAF6,
  labelStyle: TextStyle(color: Colors.white),
  labelPadding: const EdgeInsets.all(0),
  tabs: [
    _tab("1M"),
    _tab("5M"),
    _tab("15M"),
    _tab("30M", showRightBorder: false), // 取消右侧边框
    Tab(text: "1H",),
  ]
)

方案二：选中时动态切换边框颜色 #

如果希望选中Tab的边框和Indicator白色边框融合，可以通过TabController监听选中状态，动态修改边框颜色：

1. 在页面State类中初始化并监听TabController：

late TabController _tabController;

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 5, vsync: this);
  _tabController.addListener(() {
    setState(() {}); // 触发UI重绘
  });
}

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

2. 修改_tab方法，根据选中状态和位置调整边框：

Widget _tab(String text, int tabIndex) {
  final isSelected = _tabController.index == tabIndex;
  final isLastCustomTab = tabIndex == 3; // 第四个自定义Tab，索引从0开始

  return Container(
    height: 16,
    padding: const EdgeInsets.all(0),
    width: double.infinity,
    decoration: BoxDecoration(
      border: isLastCustomTab
          ? null // 最后一个自定义Tab不显示边框
          : Border(
              right: BorderSide(
                color: isSelected ? Colors.white : const Color(0xFF454545),
                width: 1,
              ),
            ),
    ),
    child: Tab(text: text),
  );
}

3. 在TabBar中绑定controller，并给每个自定义Tab传入索引：

TabBar(
  controller: _tabController, // 绑定控制器
  indicatorPadding: EdgeInsets.symmetric(vertical: 10),
  indicator: ShapeDecoration(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(5)),
      side: BorderSide(color: Colors.white)),
    color: Color(0xFF1C1B20),
  ),
  labelColor: AppColors.whiteE3EAF6,
  labelStyle: TextStyle(color: Colors.white),
  labelPadding: const EdgeInsets.all(0),
  tabs: [
    _tab("1M", 0),
    _tab("5M", 1),
    _tab("15M", 2),
    _tab("30M", 3),
    Tab(text: "1H",),
  ]
)

方案三：移除自定义Tab的边框，改用TabBar外部分隔线 #

如果不想在Tab内部处理边框，可以将分隔线移到TabBar外层，比如用Row包裹TabBar和分隔线，但需要手动调整布局，适合对布局精度要求高的场景。

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