Flutter如何实现点击按钮变色且仅保持一个选中态，旧按钮自动恢复原色

AI 小北

2026-10-10

实现方案

核心逻辑是通过单个状态变量记录当前选中的按钮标识，所有按钮的样式和这个变量做匹配判断，点击时更新变量即可自动实现选中态互斥。

具体实现步骤

定义状态变量存储当前选中的按钮索引/唯一ID，初始值可设为null表示无默认选中。
构建每个按钮时，通过判断当前按钮的索引/ID是否和存储的选中值相等，来决定按钮使用选中态颜色还是默认颜色。
按钮点击事件中更新存储的选中值，调用setState触发UI重绘即可。

示例代码

import 'package:flutter/material.dart';

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

  @override
  State<SingleSelectBtnGroup> createState() => _SingleSelectBtnGroupState();
}

class _SingleSelectBtnGroupState extends State<SingleSelectBtnGroup> {
  // 存储当前选中的按钮索引
  int? _selectedIdx;
  final List<String> _btnTexts = ['选项1', '选项2', '选项3', '选项4'];

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: List.generate(_btnTexts.length, (index) {
        return ElevatedButton(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(
              _selectedIdx == index ? Colors.blueAccent : Colors.grey[300],
            ),
            foregroundColor: MaterialStateProperty.all(
              _selectedIdx == index ? Colors.white : Colors.black87,
            ),
          ),
          onPressed: () => setState(() => _selectedIdx = index),
          child: Text(_btnTexts[index]),
        );
      }),
    );
  }
}