Flutter TabBar标签指示器如何设置左上角与右上角圆角？

当你设置indicatorSize: TabBarIndicatorSize.tab时，直接使用BoxDecoration作为indicator不会生效，因为TabBar默认使用UnderlineTabIndicator作为指示器。你可以通过自定义UnderlineTabIndicator来实现圆角效果，具体代码如下：

TabBar(
  indicatorColor: mainColor,
  indicatorWeight: 5,
  indicatorSize: TabBarIndicatorSize.tab,
  // 自定义带圆角的指示器
  indicator: UnderlineTabIndicator(
    borderSide: BorderSide(color: mainColor, width: 5),
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(5),
      topRight: Radius.circular(5),
    ),
    insets: EdgeInsets.zero, // 让指示器宽度与标签完全匹配
  ),
  tabs: const [
    Tab(text: "标签1"),
    Tab(text: "标签2"),
    Tab(text: "标签3"),
  ],
)

关键说明： #

• UnderlineTabIndicator是TabBar的默认指示器类，通过它可以直接修改边框样式和圆角
• borderSide用来设置指示器的颜色和厚度，对应原代码中的indicatorColor和indicatorWeight
• insets: EdgeInsets.zero是必须的，默认情况下指示器会有左右内边距，设置为零后才能让指示器宽度和标签完全一致
• borderRadius直接指定左上和右上的圆角半径即可实现需求

如果你不想使用默认的指示器类，也可以通过给Tab添加容器装饰的方式实现，不过需要维护选中状态：

int _selectedTabIndex = 0;

TabBar(
  indicatorSize: TabBarIndicatorSize.tab,
  indicator: const BoxDecoration(), // 清空默认指示器
  onTap: (index) {
    setState(() {
      _selectedTabIndex = index;
    });
  },
  tabs: List.generate(3, (index) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(5),
          topRight: Radius.circular(5),
        ),
        border: _selectedTabIndex == index
            ? const Border(
                top: BorderSide(color: mainColor, width: 5),
              )
            : null,
      ),
      child: Tab(text: "标签${index + 1}"),
    );
  }),
)

推荐方案 #

第一种自定义UnderlineTabIndicator的方式更简洁，无需额外维护选中状态，是实现该需求的最优解。

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