如何从功能更改Flutter中高架按钮的背景颜色？

html5 • • 问答

我是 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'),
            onPressed: () {},
            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,    
  VisualDensity visualDensity, 
  MaterialTapTargetSize tapTargetSize, 
  Duration animationDuration, 
  bool enableFeedback
})

例子

ElevatedButton(
            child: Text('Button'),
            onPressed: () {},
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red),
                padding: MaterialStateProperty.all(EdgeInsets.all(50)),
                textStyle: MaterialStateProperty.all(TextStyle(fontSize: 30))),
),

回答

将颜色作为参数传递并使用MaterialStateProperty.all<Color>(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
  ),
  onPressed: () {},
  child: Text('ElevatedButton with custom foreground/background'),
)

样品按钮

参考：

ElevatedButton 类

以上是如何从功能更改Flutter中高架按钮的背景颜色？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>