Flutter 保持颤振';s样式独立于/独立于视图代码
这就是我今天设计一个简单的颤振按钮的方式-Flutter 保持颤振';s样式独立于/独立于视图代码,flutter,flutter-layout,flutter-dependencies,Flutter,Flutter Layout,Flutter Dependencies,这就是我今天设计一个简单的颤振按钮的方式- FlatButton( child: Text('Hello'), onPressed: () {}, color: Colors.blue, colorBrightness: Brightness.dark, disabledColor: Colors.blueGrey, highlightColor: Colors.red,
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(几乎)为web做了什么?看起来代码会更干净,我也可以重用我的样式
我可以为自定义亮度创建类似于亮度类的子类,但这似乎有些过分
还有,今天发现这个包裹让我更接近我想要的-
理想情况下,在Flatter中保持样式与视图代码分离的一些好做法是什么
提前谢谢 也许您知道,但您可以在main.dart中声明通用样式 对于按钮主题 对于卡片主题 我已经创建了一个使用此软件包的 它允许您为小部件创建样式,存储它们以便重用等等
final textStyle = TxtStyle()
..textColor(Colors.white)
..fontSize(30)
..bold()
..italic()
..textAlign.start();
Text(
'hi',
style:textStyle
)
解决方案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),
),
),
Extra,您还可以拥有一些具有预定义样式的命名构造函数
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(),
),
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(),
),