Flutter中如何规范管理多类型（accent）按钮？

针对你当前用枚举管理按钮accent的痛点，这里提供一种符合SOLID原则、扩展性强且能消除重复代码的实现方案：

核心思路 #

将按钮的样式属性（高度、颜色、圆角等）封装为独立的配置类，通过抽象类提取公共逻辑，让具体按钮类复用这些逻辑，避免枚举带来的扩展性限制和代码重复。

1. 定义按钮样式配置类 #

创建ButtonStyleConfig封装所有样式维度，预定义对应Figma设计的三种accent配置：

class ButtonStyleConfig {
  final double height;
  final Color backgroundColor;
  final Color foregroundColor;
  final BorderRadius borderRadius;
  final TextStyle textStyle;

  const ButtonStyleConfig({
    required this.height,
    required this.backgroundColor,
    required this.foregroundColor,
    required this.borderRadius,
    required this.textStyle,
  });

  // 对应Figma的三个accent样式
  static const primary = ButtonStyleConfig(
    height: 72.0,
    backgroundColor: ColorConstants.kCallToAction,
    foregroundColor: ColorConstants.kText,
    borderRadius: BorderRadius.all(Radius.circular(20.0)),
    textStyle: TextStyle(color: ColorConstants.kText, fontSize: 16),
  );

  static const secondary = ButtonStyleConfig(
    height: 60.0,
    backgroundColor: ColorConstants.kCallToActionSecondary,
    foregroundColor: ColorConstants.kText,
    borderRadius: BorderRadius.all(Radius.circular(20.0)),
    textStyle: TextStyle(color: ColorConstants.kText, fontSize: 14),
  );

  static const tertiary = ButtonStyleConfig(
    height: 48.0,
    backgroundColor: ColorConstants.kCallToAction,
    foregroundColor: ColorConstants.kText,
    borderRadius: BorderRadius.all(Radius.circular(20.0)),
    textStyle: TextStyle(color: ColorConstants.kText, fontSize: 12),
  );
}

2. 提取基础按钮抽象类 #

把所有按钮共享的样式构建逻辑抽离到抽象类，消除重复代码：

abstract class BaseButton extends StatelessWidget {
  final String text;
  final IconData icon;
  final ButtonStyleConfig styleConfig;
  final VoidCallback onPressed;

  const BaseButton({
    super.key,
    required this.text,
    required this.icon,
    required this.styleConfig,
    required this.onPressed,
  });

  // 公共样式构建方法，所有按钮复用
  ButtonStyle _buildButtonStyle() {
    return ButtonStyle(
      minimumSize: MaterialStateProperty.all(
        Size(double.infinity, styleConfig.height),
      ),
      backgroundColor: MaterialStateProperty.all(styleConfig.backgroundColor),
      foregroundColor: MaterialStateProperty.all(styleConfig.foregroundColor),
      textStyle: MaterialStateProperty.all(styleConfig.textStyle),
      shape: MaterialStateProperty.all(
        RoundedRectangleBorder(
          borderRadius: styleConfig.borderRadius,
        ),
      ),
    );
  }
}

3. 实现具体按钮类 #

继承抽象类，只需实现各自的按钮类型（Elevated/Outlined），无需重复处理样式逻辑：

class FilledButton extends BaseButton {
  // 默认使用tertiary样式，和原逻辑保持一致
  const FilledButton({
    super.key,
    required super.text,
    required super.icon,
    super.styleConfig = ButtonStyleConfig.tertiary,
    required super.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton.icon(
      onPressed: onPressed,
      style: _buildButtonStyle(),
      icon: Icon(icon),
      label: Text(text),
    );
  }
}

class CustomOutlinedButton extends BaseButton {
  const CustomOutlinedButton({
    super.key,
    required super.text,
    required super.icon,
    super.styleConfig = ButtonStyleConfig.tertiary,
    required super.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return OutlinedButton.icon(
      onPressed: onPressed,
      // 针对OutlinedButton调整边框样式，其余复用公共逻辑
      style: _buildButtonStyle().copyWith(
        side: MaterialStateProperty.all(
          BorderSide(color: styleConfig.backgroundColor),
        ),
      ),
      icon: Icon(icon),
      label: Text(text),
    );
  }
}

方案优势 #

• 符合SOLID原则：新增样式只需添加ButtonStyleConfig实例，无需修改现有按钮类（开闭原则）；抽象类分离样式逻辑与按钮实现（单一职责）。
• 扩展性强：后续要修改颜色、形状、字体等，直接调整配置类的预定义实例即可，不用改动按钮核心代码。
• 消除重复代码：所有按钮共享样式构建逻辑，告别多个按钮类中重复的高度判断方法。
• 语义清晰：通过ButtonStyleConfig.primary传递样式，比枚举更直观，便于团队维护。

额外优化点 #

• 可将样式配置单独放在button_styles.dart文件，统一管理所有按钮设计规范。
• 如果需要适配主题切换，可将配置类改为依赖ThemeData的方法，或者用扩展方法从主题中提取样式。

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