我希望有人能给我解释一些解决方案:)我一直在使用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的代码只是因为它没有太大区别),这也是个坏主意;
我认为创建一个抽象类(接口)会更好,这样我就可以根据自己的需要实现它。但是我不确定,它可能只是额外的,无意义的工作
1条答案
按热度按时间2vuwiymt1#
您可以使用enhanced enum,它默认来自
v2.17.0
并使用大小像