Flutter中如何修改Tab选中图标对应的下划线样式

要修改Tab选中图标对应的下划线样式，你可以通过自定义TabBar的indicator属性来实现，以下是几种常用方案：

1. 调整默认下划线的样式（简单修改） #

Flutter默认的下划线是UnderlineTabIndicator，你可以直接修改它的颜色、宽度和边距来适配需求：

TabBar(
  indicator: UnderlineTabIndicator(
    // 设置下划线颜色与厚度
    borderSide: BorderSide(
      color: Colors.orange,
      width: 4.0,
    ),
    // 调整下划线左右边距，控制显示长度
    insets: EdgeInsets.symmetric(horizontal: 16.0),
  ),
  tabs: const [
    Tab(icon: Icon(Icons.home)),
    Tab(icon: Icon(Icons.search)),
    Tab(icon: Icon(Icons.person)),
  ],
)

2. 自定义更灵活的下划线样式（比如圆角、渐变） #

如果需要更个性化的样式（比如圆角、渐变背景），可以用BoxDecoration作为指示器：

TabBar(
  indicator: BoxDecoration(
    // 下划线圆角
    borderRadius: BorderRadius.circular(8),
    // 渐变背景色
    gradient: const LinearGradient(
      colors: [Colors.blueAccent, Colors.cyan],
    ),
    // 也可单独设置纯色背景
    // color: Colors.green,
  ),
  // 仅显示图标时，给Tab加底部padding让指示器位置更合理
  tabs: const [
    Tab(icon: Icon(Icons.home), padding: EdgeInsets.only(bottom: 4)),
    Tab(icon: Icon(Icons.search), padding: EdgeInsets.only(bottom: 4)),
    Tab(icon: Icon(Icons.person), padding: EdgeInsets.only(bottom: 4)),
  ],
)

3. 让下划线匹配图标宽度 #

如果想让下划线宽度和图标宽度一致，可以先给Tab里的图标固定宽度，再调整指示器的边距：

TabBar(
  indicator: UnderlineTabIndicator(
    borderSide: const BorderSide(color: Colors.red, width: 3),
    // 根据图标宽度调整左右边距
    insets: const EdgeInsets.only(left: 32, right: 32, bottom: 2),
  ),
  tabs: [
    Tab(
      icon: SizedBox(
        width: 40,
        child: Icon(Icons.home),
      ),
    ),
    Tab(
      icon: SizedBox(
        width: 40,
        child: Icon(Icons.settings),
      ),
    ),
  ],
)

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