Flutter 在颤振中可能有不同的按钮样式?
我有一些Flutter 在颤振中可能有不同的按钮样式?,flutter,flutter-layout,Flutter,Flutter Layout,我有一些OutlineButtons,我希望能够有多种样式(暗、亮、小等) 我可以创建一个ButtonTheme,但是我如何为按钮指定主题或样式,因为它们不接受任何一个参数 ie:我希望以下两个按钮具有不同的背景色: children: { OutlineButton(color: Colors.black, child: Text("Hello")), OutlineButton(child:Text("GoodBye")) } (颜色字段在使用应用程序主题按钮的背景
OutlineButton
s,我希望能够有多种样式(暗、亮、小等)
我可以创建一个ButtonTheme,但是我如何为按钮指定主题或样式,因为它们不接受任何一个参数
ie:我希望以下两个按钮具有不同的背景色:
children: {
OutlineButton(color: Colors.black, child: Text("Hello")),
OutlineButton(child:Text("GoodBye"))
}
(颜色字段在使用应用程序主题按钮的背景时被忽略)
编辑:示例代码:
Widget button(BuildContext context, String icon, String title, [Color backgroundColor = Colors.white, Color textColor = Colors.black] ) {
return Padding(
padding: const EdgeInsets.only(bottom: 15),
child: Row(
children: <Widget>[
new Expanded(
child: new OutlineButton(
key: null,
shape: RoundedRectangleBorder(),
borderSide: new BorderSide(color: const Color(0xff666666)),
highlightedBorderColor: Color(0xFF303030),
color: backgroundColor,
onPressed: buttonPressed,
child: Row(
children: <Widget>[
icon == null ? Container(width: 0, height: 0) :
new IconButton(
icon: Image.asset(icon),
iconSize: 32.0,
onPressed: () {
},
),
new Expanded(
child: new Text(
title,
textAlign: TextAlign.center,
style: Theme.of(context).primaryTextTheme.button.copyWith(color: textColor)
),
),
],
))),
],
),
);
}
void buttonPressed() {}
您可以使用添加
按钮主题
到主题数据
,然后使用颜色模式属性在小部件中定义颜色(您有一组30种可自定义的颜色),如下所示:
RaisedButton(color:Theme.of(context.buttonTheme.colorScheme.primary)
我会创建可重用的自定义按钮小部件,或者至少可以创建可重用的按钮小部件来包装按钮。我有一个button()方法,它接受文本、文本颜色和背景颜色,但正如我所说的,即使我传递颜色。黑色,它仍然是白色的(但textColor会被修改)你应该发布相关的代码。最好是创建小部件,而不是构建小部件的函数。@GünterZöchbauer我用相关的代码更新了这个问题。我只是在浪费了太多时间之后才意识到这个问题。如果你使用OutlineButton,颜色:参数会被忽略。必须切换到FlatButton才能工作但是怎么做呢?这是我的代码:themetata\u buildGreenTheme(){final-themetata base=themetata.light();return base.copyWith(buttonTheme:_-mybuttonthemeta(base.buttonTheme));}
下面是按钮主题数据:buttonthemeta\u-mybuttonthemeta(buttonthemeta-base){return base.copyWith()}
您需要将新的配色方案传递给按钮的主题copyWith(colorScheme:…)
。
children: {button(null, "Hello", Colors.black, Colors.white), button(null, "Goodbye", Colors.white, Colors.black)}