如何在Flutter中实现带圆角的TabBar及选中标签的圆角指示器

问题描述 #

想要实现如下圆角TabBar效果：

尝试给TabBar外层容器设置了圆角，但不知道如何根据选中的标签给指示器也设置对应圆角，目前编写的代码如下：

import 'package:flutter/material.dart';

class AppTabBar extends StatefulWidget {
  final TabController? tabController;
  const AppTabBar({Key? key, required this.tabController}) : super(key: key);

  @override
  _AppTabBarState createState() => _AppTabBarState();
}

class _AppTabBarState extends State<AppTabBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(10.0)),
          border: Border.all(color: Color.fromRGBO(27, 189, 198, 1))),
      child: TabBar(
        controller: widget.tabController,
        indicator: BoxDecoration(
          color: Color.fromRGBO(27, 189, 198, 1),
        ),
        labelColor: Color.fromRGBO(238, 248, 254, 1),
        unselectedLabelColor: Color.fromRGBO(238, 248, 254, 1),
        tabs: [
          Tab(
            text: 'first',
          ),
          Tab(
            text: 'second',
          ),
        ],
      ),
    );
  }
}

当前实际效果如下，未达到预期：

解决方案 #

你需要做两处核心调整：

1. 给外层Container添加clipBehavior: Clip.hardEdge属性，自动裁剪超出圆角范围的指示器内容
2. 监听TabController的选中索引，动态给指示器设置对应方向的圆角：选中第一个标签时给左下角加圆角，选中第二个标签时给右下角加圆角

修改后的完整代码如下：

import 'package:flutter/material.dart';

class AppTabBar extends StatefulWidget {
  final TabController? tabController;
  const AppTabBar({Key? key, required this.tabController}) : super(key: key);

  @override
  _AppTabBarState createState() => _AppTabBarState();
}

class _AppTabBarState extends State<AppTabBar> {
  @override
  void initState() {
    super.initState();
    // 监听选中索引变化刷新UI
    widget.tabController?.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    int currentIndex = widget.tabController?.index ?? 0;
    return Container(
      height: 40,
      clipBehavior: Clip.hardEdge, // 新增：裁剪超出圆角范围的内容
      decoration: BoxDecoration(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(10.0)),
          border: Border.all(color: const Color.fromRGBO(27, 189, 198, 1))),
      child: TabBar(
        controller: widget.tabController,
        // 动态匹配指示器圆角
        indicator: BoxDecoration(
          color: const Color.fromRGBO(27, 189, 198, 1),
          borderRadius: currentIndex == 0
              ? const BorderRadius.only(bottomLeft: Radius.circular(10))
              : const BorderRadius.only(bottomRight: Radius.circular(10)),
        ),
        labelColor: const Color.fromRGBO(238, 248, 254, 1),
        // 修正未选中文字颜色，和边框色一致更贴合设计效果
        unselectedLabelColor: const Color.fromRGBO(27, 189, 198, 1),
        tabs: const [
          Tab(
            text: 'first',
          ),
          Tab(
            text: 'second',
          ),
        ],
      ),
    );
  }
}

如果后续需要拓展更多Tab，只需要根据索引判断对应位置的圆角规则即可，比如中间Tab不需要底部圆角，首尾Tab分别对应左下角、右下角圆角即可。

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