如何在Flutter的TabBar中实现带箭头样式的Tab按钮效果？

预期实现效果如下：

实现逻辑 #

• 整体采用Flex布局实现多Tab横向等宽排列，清除按钮默认样式
• 选中态Tab搭配底部高亮短指示器、文字变色效果，未选中Tab保持浅灰文字样式
• 点击切换时仅修改对应元素类名即可完成状态变更，适配多端显示需求

完整代码示例 #

HTML 结构

<div class="tab-group">
  <button class="tab-item active">全部</button>
  <button class="tab-item">待付款</button>
  <button class="tab-item">待发货</button>
  <button class="tab-item">待收货</button>
  <button class="tab-item">待评价</button>
</div>

CSS 样式

.tab-group {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
  background: #fff;
}
.tab-item {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #666;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tab-item.active {
  color: #ff4d4f;
  font-weight: 500;
}
/* 选中态底部指示器 */
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: #ff4d4f;
  border-radius: 1px;
}

交互逻辑

const tabList = document.querySelectorAll('.tab-item')
tabList.forEach(tab => {
  tab.addEventListener('click', () => {
    // 清空所有选中态
    tabList.forEach(item => item.classList.remove('active'))
    // 给当前点击项添加选中态
    tab.classList.add('active')
    // 可在此处添加对应内容面板切换逻辑
  })
})

如果你已有自定义TabButton代码，可对照以下点排查调整：

1. 确认选中态指示器的定位逻辑，避免出现偏移、宽度不对的问题
2. 选中与未选中状态的文字颜色、字重差异要足够明显，保证视觉区分度
3. Tab容器的底部边框不要和选中态指示器重叠，避免显示效果模糊

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