Flutter如何实现选中显示图标的按钮？新手技术咨询

你可以用Flutter自带的ToggleButtons组件，或者自定义按钮来实现需求，以下是具体方案：

方案一：使用ToggleButtons（推荐，自带选中状态管理） #

ToggleButtons原生支持选中状态切换，我们可以根据选中状态控制图标的显示/隐藏，单个或多个按钮组都适用：

单个按钮示例 #

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

  @override
  State<SelectableIconButton> createState() => _SelectableIconButtonState();
}

class _SelectableIconButtonState extends State<SelectableIconButton> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      isSelected: [_isSelected],
      onPressed: (index) => setState(() => _isSelected = !_isSelected),
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('按钮文本'),
            if (_isSelected) const SizedBox(width: 8),
            if (_isSelected) const Icon(Icons.check, size: 18),
          ],
        ),
      ],
    );
  }
}

多按钮单选/多选组示例 #

如果是类似选项卡的多按钮组，只需维护一个选中状态列表即可：

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

  @override
  State<MultiSelectGroup> createState() => _MultiSelectGroupState();
}

class _MultiSelectGroupState extends State<MultiSelectGroup> {
  final List<bool> _selectedStates = [true, false, false];

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      isSelected: _selectedStates,
      onPressed: (index) {
        setState(() {
          // 单选逻辑：仅当前按钮选中
          for (int i = 0; i < _selectedStates.length; i++) {
            _selectedStates[i] = i == index;
          }
          // 多选逻辑：切换当前按钮状态
          // _selectedStates[index] = !_selectedStates[index];
        });
      },
      children: List.generate(_selectedStates.length, (index) {
        return Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('选项 ${index + 1}'),
            if (_selectedStates[index]) const SizedBox(width: 8),
            if (_selectedStates[index]) const Icon(Icons.check, size: 18),
          ],
        );
      }),
    );
  }
}

方案二：自定义按钮（更灵活的样式控制） #

如果需要完全自定义按钮的外观（比如背景色、边框、圆角），可以用InkWell包裹容器实现：

class CustomSelectButton extends StatefulWidget {
  final String text;
  final IconData icon;
  final bool initialSelected;
  final ValueChanged<bool> onChanged;

  const CustomSelectButton({
    super.key,
    required this.text,
    required this.icon,
    this.initialSelected = false,
    required this.onChanged,
  });

  @override
  State<CustomSelectButton> createState() => _CustomSelectButtonState();
}

class _CustomSelectButtonState extends State<CustomSelectButton> {
  late bool _isSelected;

  @override
  void initState() {
    super.initState();
    _isSelected = widget.initialSelected;
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() => _isSelected = !_isSelected);
        widget.onChanged(_isSelected);
      },
      borderRadius: BorderRadius.circular(8),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          color: _isSelected ? Colors.blue[100] : Colors.grey[100],
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: _isSelected ? Colors.blue : Colors.grey),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(widget.text),
            if (_isSelected) const SizedBox(width: 8),
            if (_isSelected) Icon(widget.icon, size: 18),
          ],
        ),
      ),
    );
  }
}

使用自定义按钮 #

CustomSelectButton(
  text: '自定义选项',
  icon: Icons.check_circle,
  onChanged: (isSelected) {
    // 处理选中状态变化逻辑
    print('当前选中状态：$isSelected');
  },
)

之前你尝试的组件问题说明：

• GroupButton如果无法添加图标，可能是版本或配置限制，不如原生组件灵活；
• Chip的关闭图标默认仅绑定图标本身的点击事件，不符合"点击整个按钮切换状态并显示图标"的需求。

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