Flutter按钮状态异常：点击单个按钮全部变灰的解决方法

嗨，这个问题的根源很明显——你用了一个全局的pressed变量来控制所有按钮的颜色状态，所有按钮都共享同一个状态值，所以点击任意一个，所有按钮都会跟着变灰。下面给你两种可行的解决方案：

方案1：让每个按钮拥有独立的状态（推荐） #

把BuildButton改成一个StatefulWidget，这样每个按钮实例都会维护自己的状态，彼此互不影响：

class BuildButton extends StatefulWidget {
  final String buttonText;

  const BuildButton(this.buttonText, {super.key});

  @override
  State<BuildButton> createState() => _BuildButtonState();
}

class _BuildButtonState extends State<BuildButton> {
  bool _isPressed = false; // 每个按钮自己的状态变量

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: FlatButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0),
          side: const BorderSide(color: Colors.black),
        ),
        color: _isPressed ? Colors.grey : Colors.white,
        textColor: Colors.black,
        padding: const EdgeInsets.all(6.0),
        child: Text(widget.buttonText),
        onPressed: () {
          setState(() {
            _isPressed = !_isPressed;
          });
        },
      ),
    );
  }
}

// 父组件调用方式不变
Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        BuildButton("XXS"),
        BuildButton("XS"),
        BuildButton("S"),
        BuildButton("M"),
      ],
    ),
  ],
)

方案2：父组件统一管理选中状态（适合需要知道哪个按钮被选中的场景） #

如果需要在父组件中知道哪个按钮处于选中状态，可以在父组件里维护一个选中标识，比如选中的按钮文本，然后传递给每个按钮进行判断：

// 父组件示例（假设是StatefulWidget）
class _ParentWidgetState extends State<ParentWidget> {
  String? _selectedButton; // 记录选中的按钮文本

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            _buildButton("XXS"),
            _buildButton("XS"),
            _buildButton("S"),
            _buildButton("M"),
          ],
        ),
      ],
    );
  }

  Widget _buildButton(String buttonText) {
    return Expanded(
      child: FlatButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0),
          side: const BorderSide(color: Colors.black),
        ),
        color: _selectedButton == buttonText ? Colors.grey : Colors.white,
        textColor: Colors.black,
        padding: const EdgeInsets.all(6.0),
        child: Text(buttonText),
        onPressed: () {
          setState(() {
            // 点击时切换选中状态：如果当前已选中就取消，否则选中它
            _selectedButton = _selectedButton == buttonText ? null : buttonText;
          });
        },
      ),
    );
  }
}

这两种方案都能实现“点击单个按钮仅该按钮变灰”的需求，你可以根据自己的场景选择：如果不需要父组件知道按钮状态，方案1更简洁；如果需要在父组件中获取选中的按钮信息，方案2更合适。

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