这就是我今天设计一个简单的颤振按钮的方式 -
FlatButton(
child: Text('Hello'),
onPressed: () {},
color: Colors.blue,
colorBrightness: Brightness.dark,
disabledColor: Colors.blueGrey,
highlightColor: Colors.red,
padding: EdgeInsets.symmetric(
horizontal: 8.0, vertical: 5.0)
)
似乎颤振的视图代码需要为每个组件内置样式?我怎样才能保持完全分开?类似于CSS(几乎(为网络做什么?似乎代码会更干净,我也可以重用我的样式。
我可以对诸如 Brightness 类之类的东西进行子类化以进行自定义亮度,但这似乎有点矫枉过正。
另外,今天找到了这个包,它让我更接近我想要的东西 - https://pub.dev/packages/division
理想情况下,有哪些好的做法可以将样式与 flutter 中的视图代码分开?
提前感谢!
解决方案 1
您可以创建具有默认样式的可重用FlattButon
,并且可以随时覆盖这些样式:
例:
class MyFlatButton extends StatelessWidget {
const MyFlatButton({
Key key,
@required this.text,
@required this.onPressed,
this.color = Colors.blue, // set default Values
this.colorBrightness = Brightness.dark, //
this.disabledColor = Colors.blueGrey, //
this.highlightColor = Colors.red, //
this.padding =
const EdgeInsets.symmetric(horizontal: 8.0, vertical: 5.0), //
}) : super(key: key);
final String text;
final VoidCallback onPressed;
final Color color;
final Brightness colorBrightness;
final MaterialColor disabledColor;
final MaterialColor highlightColor;
final EdgeInsetsGeometry padding;
@override
Widget build(BuildContext context) {
return FlatButton(
child: Text(
'$text',
),
onPressed: onPressed,
color: color,
colorBrightness: colorBrightness,
disabledColor: disabledColor,
highlightColor: highlightColor,
padding: padding,
);
}
}
您可以在应用程序中像MyFlatButton而不是FlatButton一样使用它
child: MyFlatButton(
text: 'Hello',
onPressed: () {},
color: Colors.cyan,
),
解决方案 2
如果你想"完全"分离样式,你可以创建一个额外的类来保存样式
class MyFlatButton2 extends StatelessWidget {
const MyFlatButton2({
Key key,
@required this.text,
@required this.onPressed,
this.styles = const ButtonStyles(),
}) : super(key: key);
final String text;
final VoidCallback onPressed;
final ButtonStyles styles;
@override
Widget build(BuildContext context) {
final btnStyles = ButtonStyles();
return FlatButton(
child: Text('$text'),
onPressed: onPressed,
color: styles.color ?? btnStyles.color,
colorBrightness: styles.colorBrightness ?? btnStyles.colorBrightness,
disabledColor: styles.disabledColor ?? btnStyles.disabledColor,
highlightColor: styles.highlightColor ?? btnStyles.highlightColor,
padding: styles.padding ?? btnStyles.padding,
);
}
}
// Styles Class
class ButtonStyles {
final Color color;
final Brightness colorBrightness;
final MaterialColor disabledColor;
final MaterialColor highlightColor;
final EdgeInsetsGeometry padding;
const ButtonStyles({
this.color = Colors.blue, // set default Values
this.colorBrightness = Brightness.dark, //
this.disabledColor = Colors.blueGrey, //
this.highlightColor = Colors.red, //
this.padding =
const EdgeInsets.symmetric(horizontal: 8.0, vertical: 5.0), //
});
}
然后你可以使用它 使用默认样式
child: MyFlatButton2(
text: 'Hello',
onPressed: () {},
),
或者您可以覆盖样式
child: MyFlatButton2(
text: 'Hello',
onPressed: () {},
styles: ButtonStyles(
colorBrightness: Brightness.dark,
color: Colors.green,
padding: EdgeInsets.all(20),
),
),
此外,您还可以使用一些具有预定义样式的命名构造函数
factory ButtonStyles.predefinedStyle1() => ButtonStyles(
color: Colors.green, // set default Values
colorBrightness: Brightness.light, //
disabledColor: Colors.red, //
highlightColor: Colors.red, //
padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 15.0),
);
然后
child: MyFlatButton2(
text: 'Hello',
onPressed: () {},
styles: ButtonStyles.predefinedStyle1(),
),
也许你可能知道,但你可以在main.dart中声明通用样式,
对于按钮主题,
ThemeData(
...
buttonTheme: ButtonThemeData(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
colorScheme: colorSchemeDark,
splashColor: AppColors.themeColor.shade900,
height: 50,
highlightColor: AppColors.themeColor.shade800,
textTheme: ButtonTextTheme.primary,
),
)
对于卡片主题,
ThemeData(
...
cardTheme: CardTheme(
margin: EdgeInsets.only(top: 8, left: 8, right: 8, bottom: 8),
elevation: 6.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
)
我在这里创建了一个要点
使用此包 https://pub.dev/packages/division
它允许您为小部件创建样式,存储它们以供重复使用等等。
final textStyle = TxtStyle()
..textColor(Colors.white)
..fontSize(30)
..bold()
..italic()
..textAlign.start();
Text(
'hi',
style:textStyle
)