如何从功能更改 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(color)来指定颜色。

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 class

,

您可以像这样设置背景颜色：

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
          )
        )