flutter 如何正确管理超过1种类型(重音)的按钮?

vom3gejh  于 2023-01-09  发布在  Flutter
关注(0)|答案(1)|浏览(91)

我希望有人能给我解释一些解决方案:)我一直在使用Flutter开发应用程序UI,在Figma上的应用程序设计中有两种类型的按钮,每种都有自己的重音(目前有3种),它们只是定义了按钮的高度。
Those 2 types of button and accents
因此,这些按钮对应用程序有不同的强调,我需要按照最佳编码实践以某种方式管理它。
现在我只创建了枚举,它包含重音变化:

enum ButtonAccent {
  primary,
  secondary,
  tertiary,
}

class FilledButton extends StatelessWidget {
  final String text;
  final IconData icon;
  final Color backgroundColor;
  final Color foregroundColor;
// defines a button height following Figma design. By default 'buttonAccent = ButtonAccent.tertiary', which sets 'heigth = 46'
  final ButtonAccent buttonAccent;
  final VoidCallback onPressed;

  const FilledButton(
      {super.key,
      required this.text,
      required this.icon,
      this.backgroundColor = ColorConstants.kCallToAction,
      this.foregroundColor = ColorConstants.kText,
      this.buttonAccent = ButtonAccent.tertiary,
      required this.onPressed});
// method that checks accent
  double _buttonHeigthFromAccent() => buttonAccent == ButtonAccent.primary
      ? 72.0
      : buttonAccent == ButtonAccent.secondary
          ? 60.0
          : buttonAccent == ButtonAccent.tertiary
              ? 48.0
              : throw Exception('Wrong ButtonAccent value');

  @override
  Widget build(BuildContext context) {
    return ElevatedButton.icon(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
          minimumSize: Size(double.infinity, _buttonHeigthFromAccent()),
          backgroundColor: backgroundColor,
          foregroundColor: foregroundColor,
          textStyle: const TextStyle(color: ColorConstants.kText),
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20.0))),
      icon: Icon(icon),
      label: Text(text),
    );
  }
}

然后我的FilledButton包含了一个方法,它检查通过constructor传递的重音并返回正确的高度。但是!在我看来,它有很多缺点:
1.如果我们不仅考虑改变按钮的高度,还考虑改变一般的样式(颜色、形状等),这将导致我们重写整个按钮实现和ButtonAccent枚举;
1.不确定是否符合SOLID的所有原则;
1.我把_buttonHeigthFromAccent()放在CustomOutlinedButton和FilledButton中(添加FilledButton的代码只是因为它没有太大区别),这也是个坏主意;
我认为创建一个抽象类(接口)会更好,这样我就可以根据自己的需要实现它。但是我不确定,它可能只是额外的,无意义的工作

2vuwiymt

2vuwiymt1#

您可以使用enhanced enum,它默认来自v2.17.0

enum ButtonAccent {
  primary(72.0),
  secondary(60.0),
  tertiary(48.0);

  const ButtonAccent(this.size);
  final double size;
}

并使用大小像

minimumSize: Size(double.infinity, buttonAccent.size),

相关问题