Flutter中实现可选中/取消选中的圆角按钮（类似Tab）

不需要依赖Scaffold的Tab组件，有两种常用方案可以实现你要的效果：

方案一：使用ToggleButtons组件（快速实现） #

Flutter Material库自带的ToggleButtons专门针对多选项切换场景设计，完全独立于TabBar，支持自定义样式，能轻松实现选中/未选中状态切换。

示例代码：

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

  @override
  State<CustomTabButtons> createState() => _CustomTabButtonsState();
}

class _CustomTabButtonsState extends State<CustomTabButtons> {
  // 维护选中状态，true表示对应索引的按钮被选中
  final List<bool> _isSelected = [true, false];

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      // 设置选中/未选中的背景色
      fillColor: Colors.blueAccent,
      color: Colors.grey,
      selectedColor: Colors.white,
      // 圆角设置
      borderRadius: BorderRadius.circular(20),
      // 按钮内边距
      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 12),
      // 选中状态列表
      isSelected: _isSelected,
      // 点击回调
      onPressed: (int index) {
        setState(() {
          // 单选逻辑：点击时仅当前按钮选中，其余取消
          for (int i = 0; i < _isSelected.length; i++) {
            _isSelected[i] = i == index;
          }
        });
      },
      // 按钮内容
      children: const [
        Text('Vehicle'),
        Text('Key'),
      ],
    );
  }
}

方案二：自定义按钮组（完全可控） #

如果需要更灵活的样式定制，可以用GestureDetector或InkWell结合Container手动实现，完全掌控每个按钮的状态和外观。

示例代码：

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

  @override
  State<CustomTabGroup> createState() => _CustomTabGroupState();
}

class _CustomTabGroupState extends State<CustomTabGroup> {
  // 当前选中的按钮索引，-1表示未选中（可选）
  int _selectedIndex = 0;

  // 按钮数据
  final List<String> _tabTexts = ['Vehicle', 'Key'];

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(_tabTexts.length, (index) {
        final isSelected = _selectedIndex == index;
        return GestureDetector(
          onTap: () {
            setState(() {
              // 单选逻辑，若需支持取消选中，可改为：_selectedIndex = _selectedIndex == index ? -1 : index;
              _selectedIndex = index;
            });
          },
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 8),
            padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 14),
            decoration: BoxDecoration(
              color: isSelected ? Colors.blueAccent : Colors.grey.shade200,
              borderRadius: BorderRadius.circular(24),
            ),
            child: Text(
              _tabTexts[index],
              style: TextStyle(
                color: isSelected ? Colors.white : Colors.grey.shade700,
                fontSize: 16,
                fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
              ),
            ),
          ),
        );
      }),
    );
  }
}

自定义方案的优势： #

• 可任意调整按钮的尺寸、间距、圆角大小
• 支持更复杂的选中态样式（比如添加边框、阴影、图标变化）
• 灵活控制是否允许取消选中（修改onTap内的逻辑即可）

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