Flutter自定义InputButton选中状态颜色不生效问题排查

核心问题分析 #

1. 禁用状态覆盖自定义样式：选中的按钮onPressed被设为null，Flutter的ElevatedButton会自动应用禁用样式（灰色背景），这会直接覆盖你设置的backgroundColor，导致选中后显示灰色。
2. 静态状态变量冲突：buttonSelections是类静态变量，多个InputButton实例会共享这个状态，容易导致选中状态混乱。
3. 未使用传入的选中背景色：getBgColor方法里硬编码返回Colors.blue.shade300，没有用组件传入的widget.isSelectedBgColor参数。

修复步骤 #

1. 替换禁用状态逻辑，保留按钮可交互性

选中按钮时不要把onPressed设为null，而是通过样式区分选中状态，点击时判断当前状态来决定是否执行切换逻辑，避免按钮进入禁用状态。

2. 移除静态状态变量

把buttonSelections改为实例变量，确保每个InputButton组件拥有独立的选中状态，不会互相干扰。

3. 使用传入的选中背景色参数

修改背景色获取逻辑，直接返回widget.isSelectedBgColor，不再硬编码颜色值。

4. 优化文本样式优先级

利用ElevatedButton.styleFrom的foregroundColor控制文本颜色，不需要在TextStyle里重复设置，避免样式冲突。

修复后的完整代码 #

class InputButton extends StatefulWidget {
  final Color backgroundColor;
  final Color textColor;
  final Color isSelectedBgColor;
  final Color isSelectedTextColor;
  final double height;
  final double width;
  final double borderRadius;
  final List<dynamic> itemList;
  final ValueNotifier<bool> controller;
  final bool isVisible;
  final ButtonAlignment alignment;
  final double buttonSpacing;

  InputButton({
    required this.backgroundColor,
    required this.textColor,
    required this.isSelectedBgColor,
    required this.isSelectedTextColor,
    required this.height,
    required this.width,
    required this.borderRadius,
    required this.itemList,
    required this.controller,
    this.isVisible = true,
    this.alignment = ButtonAlignment.horizontal,
    this.buttonSpacing = 10.0,
  });

  @override
  _InputButtonState createState() => _InputButtonState();
}

class _InputButtonState extends State<InputButton> {
  // 改为实例变量，避免多实例状态冲突
  final Map<String, bool> buttonSelections = {};

  @override
  void initState() {
    super.initState();

    // 初始化选中状态
    for (var item in widget.itemList) {
      buttonSelections[item.name] = false;
    }
    if (widget.itemList.isNotEmpty) {
      buttonSelections[widget.itemList[0].name] = true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: widget.isVisible,
      child: widget.alignment == ButtonAlignment.horizontal
          ? Row(children: _buildButtons())
          : Column(children: _buildButtons()),
    );
  }

  List<Widget> _buildButtons() {
    List<Widget> buttons = [];
    for (var item in widget.itemList) {
      final String label = item.name;
      final bool isSelected = buttonSelections[label]!;
      final Color borderColor = widget.isSelectedBgColor;

      buttons.add(
        SizedBox(
          height: widget.height,
          width: widget.width,
          child: ElevatedButton(
            // 保持按钮可点击，点击时判断是否已选中
            onPressed: () async {
              if (!isSelected) {
                setState(() => setButtonSelection(label));
              }
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: isSelected ? widget.isSelectedBgColor : widget.backgroundColor,
              foregroundColor: isSelected ? widget.isSelectedTextColor : widget.textColor,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(widget.borderRadius),
                side: BorderSide(color: borderColor),
              ),
            ),
            child: ValueListenableBuilder<bool>(
              valueListenable: widget.controller,
              builder: (context, isLoading, child) {
                if (isLoading) {
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SizedBox(
                        width: 20,
                        height: 20,
                        child: CircularProgressIndicator(
                          color: isSelected ? widget.isSelectedTextColor : widget.textColor,
                        ),
                      ),
                      const SizedBox(width: 10),
                      Text(label),
                    ],
                  );
                } else {
                  return Text(label);
                }
              },
            ),
          ),
        ),
      );

      // 添加按钮间距
      if (widget.alignment == ButtonAlignment.horizontal) {
        buttons.add(SizedBox(width: widget.buttonSpacing));
      } else {
        buttons.add(SizedBox(height: widget.buttonSpacing));
      }
    }

    return buttons;
  }

  void setButtonSelection(String selectedKey) {
    for (String key in buttonSelections.keys) {
      buttonSelections[key] = key == selectedKey;
    }
  }
}

// 补充ButtonAlignment枚举定义（如果之前未定义）
enum ButtonAlignment {
  horizontal,
  vertical,
}

关键修复点说明 #

• 移除了onPressed: isSelected ? null : ...的逻辑，改为点击时判断是否已选中，彻底避免按钮进入禁用状态。
• buttonSelections从静态变量改为实例变量，每个组件实例拥有独立状态，不会互相干扰。
• 直接使用传入的widget.isSelectedBgColor作为选中背景色，符合组件设计的参数化需求。
• 利用foregroundColor统一控制文本颜色，简化代码同时避免样式冲突。

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