Flutter中如何为未选中的TabBar标签添加侧边边框

根据你需要的效果（未选中标签带圆角边框，选中标签填充底色无框），分两种常用平台给出实现方法：

iOS（Swift）实现 #

1. 先给UILabel添加内边距扩展 #

避免文字紧贴边框，先给UILabel加个扩展：

extension UILabel {
    var padding: UIEdgeInsets {
        get { UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) }
        set { frame = frame.inset(by: newValue) }
    }
}

2. 自定义TabBarController管理样式 #

在自定义的TabBarController中初始化并切换选中/未选中状态的样式：

class CustomTabBarVC: UITabBarController, UITabBarControllerDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        delegate = self
        // 初始化所有标签样式
        updateTabStyles()
    }

    // 切换标签时更新样式
    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        updateTabStyles()
    }

    private func updateTabStyles() {
        guard let tabItems = tabBar.items else { return }
        for (index, item) in tabItems.enumerated() {
            // 给每个标签创建自定义Label
            let tabLabel = UILabel()
            tabLabel.text = item.title
            tabLabel.textAlignment = .center
            tabLabel.padding = UIEdgeInsets(top: 4, left: 8, bottom: 4, right: 8)
            tabLabel.layer.cornerRadius = 12
            tabLabel.clipsToBounds = true

            // 区分选中/未选中状态
            if index == selectedIndex {
                tabLabel.textColor = .systemBlue
                tabLabel.backgroundColor = .systemBlue.withAlphaComponent(0.1)
                tabLabel.layer.borderWidth = 0
            } else {
                tabLabel.textColor = .gray
                tabLabel.backgroundColor = .clear
                tabLabel.layer.borderWidth = 1
                tabLabel.layer.borderColor = UIColor.gray.cgColor
            }
            item.customView = tabLabel
        }
    }
}

Flutter实现 #

1. 自定义可切换状态的Tab组件 #

先写一个能根据选中状态切换样式的自定义Tab：

class StyledTab extends StatelessWidget {
  final String title;
  final bool isActive;

  const StyledTab({super.key, required this.title, required this.isActive});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        border: isActive ? null : Border.all(color: Colors.grey),
        color: isActive ? Colors.blue.withOpacity(0.1) : Colors.transparent,
      ),
      child: Text(
        title,
        style: TextStyle(
          color: isActive ? Colors.blue : Colors.grey,
          fontSize: 14,
        ),
      ),
    );
  }
}

2. 在页面中集成TabBar #

用StatefulWidget管理选中状态，隐藏默认指示器：

class TabPage extends StatefulWidget {
  const TabPage({super.key});

  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  int _currentTab = 0;
  final List<String> tabTitles = ["首页", "发现", "我的"];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabTitles.length,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            onTap: (index) => setState(() => _currentTab = index),
            indicator: const BoxDecoration(), // 隐藏默认下划线
            tabs: tabTitles.map((title) {
              return StyledTab(
                title: title,
                isActive: tabTitles.indexOf(title) == _currentTab,
              );
            }).toList(),
          ),
        ),
        body: TabBarView(
          children: tabTitles.map((title) => Center(child: Text(title))).toList(),
        ),
      ),
    );
  }
}

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