如何解决如何从功能更改 Flutter 中高架按钮的背景颜色?
我是 Flutter 的新手,我上周开始使用 Flutter,现在我想做一个简单的 Xylophone 应用程序。我成功创建了 UI 并创建了一个函数 playSound(int soundNumber)
,但是当我调用这个函数来播放声音时,它给了我这个错误。
**The following _TypeError was thrown building Body(dirty,state: _BodyState#051c2):
type '_MaterialStatePropertyAll<dynamic>' is not a subtype of type 'MaterialStateProperty<Color?>?'**
这是我为 playSound(int soundNumber)
函数编写的代码。
void playSound(int soundNumber) {
final player = AudioCache();
player.play('note$soundNumber.wav');}
Expanded buildplayButton({MaterialStateProperty color,int soundNumber}){
return Expanded(
child: ElevatedButton(
onpressed: () {
playSound(soundNumber);
},style: ButtonStyle(
backgroundColor: color,),);}
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,children: <Widget>[
buildplayButton(color: MaterialStateProperty.all(Colors.red),soundNumber: 1),buildplayButton(color: MaterialStateProperty.all(Colors.orangeAccent),soundNumber: 2),buildplayButton(color: MaterialStateProperty.all(Colors.yellow),soundNumber: 3),buildplayButton(color: MaterialStateProperty.all(Colors.indigo),soundNumber: 4),buildplayButton(color: MaterialStateProperty.all(Colors.blue),soundNumber: 5),buildplayButton(color: MaterialStateProperty.all(Colors.lightGreenAccent),soundNumber: 6),buildplayButton(color: MaterialStateProperty.all(Colors.green),soundNumber: 7),],);
}
解决方法
您可以使用 styleFrom 静态方法或 ButtonStyle 类来设置 ElevatedButton 的样式。第一个比第二个方便。
使用 styleFrom 为 ElevatedButton 设置样式:
ElevatedButton(
child: Text('Button'),onPressed: () {},style: ElevatedButton.styleFrom({
Color primary,// set the background color
Color onPrimary,Color onSurface,Color shadowColor,double elevation,TextStyle textStyle,EdgeInsetsGeometry padding,Size minimumSize,BorderSide side,OutlinedBorder shape,MouseCursor enabledMouseCursor,MouseCursor disabledMouseCursor,VisualDensity visualDensity,MaterialTapTargetSize tapTargetSize,Duration animationDuration,bool enableFeedback
}),),
示例:
ElevatedButton(
child: Text('Button'),style: ElevatedButton.styleFrom(
primary: Colors.purple,padding: EdgeInsets.symmetric(horizontal: 50,vertical: 20),textStyle: TextStyle(
fontSize: 30,fontWeight: FontWeight.bold)),
使用 ButtonStyle 为 ElevatedButton 设置样式:
style: ButtonStyle({
MaterialStateProperty<TextStyle> textStyle,MaterialStateProperty<Color> backgroundColor,MaterialStateProperty<Color> foregroundColor,MaterialStateProperty<Color> overlayColor,MaterialStateProperty<Color> shadowColor,MaterialStateProperty<double> elevation,MaterialStateProperty<EdgeInsetsGeometry> padding,MaterialStateProperty<Size> minimumSize,MaterialStateProperty<BorderSide> side,MaterialStateProperty<OutlinedBorder> shape,MaterialStateProperty<MouseCursor> mouseCursor,bool enableFeedback
})
示例
ElevatedButton(
child: Text('Button'),style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red),padding: MaterialStateProperty.all(EdgeInsets.all(50)),textStyle: MaterialStateProperty.all(TextStyle(fontSize: 30))),
,
将颜色作为参数传递并使用MaterialStateProperty.all
buildPlayButton(color: Colors.red,soundNumber: 1)
Expanded buildPlayButton({Color color,int soundNumber}){
return Expanded(
child: ElevatedButton(
onPressed: () {
playSound(soundNumber);
},style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(color),);}
示例按钮
一般情况
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,// background
onPrimary: Colors.yellow,// foreground
),child: Text('ElevatedButton with custom foreground/background'),)
示例按钮
参考:
,您可以像这样设置背景颜色:
ElevatedButton(
onPressed: resetHandler,child: Text("button"),style: ElevatedButton.styleFrom(primary: Colors.amber),
,
style: ElevatedButton.styleFrom(Primary : Colors.black),
,
截图:
代码:
class _MyState extends State<MyPage> {
bool _flag = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => setState(() => _flag = !_flag),child: Text(_flag ? 'Red' : 'Green'),style: ElevatedButton.styleFrom(
primary: _flag ? Colors.red : Colors.teal,// This is what you need!
),);
}
}
,
style: ButtonStyle({
MaterialStateProperty.all(backgroundColor),
同样,您可以将 MaterialStateProperty.all(<Value here>)
添加到高架按钮的大多数属性(高度、填充、边框等)。
ElevatedButton(
onPressed: (){},child: Text('comprar'),style: ElevatedButton.styleFrom(
primary: Theme.of(context).primaryColor
)
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。