flutter - 如何从函数中更改 Flutter 中高架按钮的背景颜色？

Question

我是 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),
  ],
);
}

如何调用此函数，因为它给了我上述错误？

score 150 · Accepted Answer

您可以使用 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))),
),

score 41 · Accepted Answer

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

score 11 · Accepted Answer

ElevatedButton(onPressed: resetHandler,
               child: Text("button"),
               style: ElevatedButton.styleFrom(primary: Colors.amber),),

score 6 · Accepted Answer

您有 3 个选项来更改背景颜色：

ElevatedButton.styleFrom ： 如果您只想更改背景颜色和前景色而不考虑状态，那么您可以执行以下操作。

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

MaterialStateProperty.all ： 覆盖所有状态的 ElevatedButtons 默认背景（文本/图标）颜色。

 ElevatedButton(style:   
    ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.red),
    onPressed: () { },
    child: Text('custom foreground/background'),
    ));

MaterialStateProperty.resolveWith ： 默认情况下，提升按钮继承蓝色。我们可以使用 style 参数和 ButtonStyle 类调整默认样式。按钮具有不同的状态，例如按下、禁用、悬停等。您可以更改每种状态的样式。在下面的代码片段中，按钮的默认颜色在按下时变为绿色。

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed))
          return Colors.green;
        return null; // Use the component's default.
      },
    ),
  ),
)

score 4 · Accepted Answer

截屏：

代码：

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!
          ),
        ),
      ),
    );
  }
}

score 2 · Accepted Answer

只需使用MaterialStateProperty.all(**YOUR COLOR**)：

ElevatedButton(
            child: Text('Button'),
            onPressed: () {},
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red),)
),

score 1 · Accepted Answer

1

style: ElevatedButton.styleFrom(Primary : Colors.black),

于 2021-05-14T04:43:53.630 回答

score 0 · Accepted Answer

style: ButtonStyle({  
  MaterialStateProperty.all(backgroundColor),   
),

同样，您可以添加MaterialStateProperty.all(<Value here>)到提升按钮的大多数属性（高度、填充、边框等）。

score 0 · Accepted Answer

ElevatedButton(
          onPressed: (){},
          child: Text('comprar'),
          style: ElevatedButton.styleFrom(
            primary: Theme.of(context).primaryColor
          )
        )

score 0 · Accepted Answer

0

确保添加 onPressed: () {},

否则颜色将是灰色的

于 2021-12-21T23:36:12.593 回答

flutter - 如何从函数中更改 Flutter 中高架按钮的背景颜色？

10 回答 10

Related

Reference