如何从 Flutter 函数中更改 Elevated Button 的背景颜色？

10 浏览
0 Comments

如何从 Flutter 函数中更改 Elevated Button 的背景颜色？

我是Flutter的新手，上周开始学习Flutter。现在我想制作一个简单的木琴应用程序。我成功创建了UI并制作了一个函数playSound(int soundNumber)，但当我调用这个函数来播放声音时，它给了我这个错误。

下面的_TypeError在构建Body(dirty，state:_BodyState#051c2）时抛出：

类型\'_MaterialStatePropertyAll\'不是类型\'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: [
      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),
    ],
  );
}

我该怎么调用这个函数，因为它会给我上述错误？

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

将颜色作为参数传递并使用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),
      ),
    ),
);}

示例按钮

Elevated Button

一般情况下

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // background
    onPrimary: Colors.yellow, // foreground
  ),
  onPressed: () {},
  child: Text('ElevatedButton with custom foreground/background'),
)

示例按钮

ElevatedButton with custom foreground/background

参考资料：

ElevatedButton类

0
0 Comments

您可以使用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,
  MaterialStateProperty backgroundColor,
  MaterialStateProperty foregroundColor,
  MaterialStateProperty overlayColor,
  MaterialStateProperty shadowColor,
  MaterialStateProperty elevation,
  MaterialStateProperty padding,
  MaterialStateProperty minimumSize,
  MaterialStateProperty side,
  MaterialStateProperty shape,
  MaterialStateProperty 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))),
),

0