如何从功能上改变颤动提升按钮的背景颜色？

我是 Flutter 的新手，我上周开始创建 Flutter 的，现在我想做一个简单的木琴应用程序。我成功地创建了 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),
],
);
}

如何调用这个函数，因为它给我上面提到的错误？

288921 次浏览
小开

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

样本按钮

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(onPressed: resetHandler,
child: Text("button"),
style: ElevatedButton.styleFrom(primary: Colors.amber),),
小开
最佳答案

可以通过使用 styleFrom 静态方法或 ButtonStyle 类来设置 ElevatedButton 的样式。第一个比第二个更方便。

返回文章页面使用 styleFrom 来设计一个高级按钮:

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 来设计高级按钮:

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))),
),
小开 
style: ButtonStyle({
MaterialStateProperty.all(backgroundColor),
),

类似地，您可以将 MaterialStateProperty.all(<Value here>)添加到大多数属性的提升按钮(立面，填充，边框等)。

小开 
style: ElevatedButton.styleFrom(primary : Colors.black),
小开

截图:

enter image description here

密码:

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(
backgroundColor: _flag ? Colors.red : Colors.teal, // This is what you need!
),
),
),
);
}
}
小开 
ElevatedButton(
onPressed: (){},
child: Text('comprar'),
style: ElevatedButton.styleFrom(
primary: Theme.of(context).primaryColor
)
)
小开

确保添加 onPress: (){} ,

否则颜色会变成灰色

小开

你有3个选项来改变背景颜色:

返回文章页面提升纽扣风格译者: 如果你只是想改变背景颜色和前景颜色而不考虑状态，那么你可以按照下面给出的方法来做。

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

所有: 覆盖所有状态的 ElevatedButtons 默认背景(文本/图标)颜色。

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

用: 默认情况下，提升的按钮继承蓝色。我们可以使用 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.
},
),
),
)
小开

使用 MaterialStateProperty.all(**YOUR COLOR**):

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

或者像这样: 使用 ElevatedButton.styleFrom(primary: **YOUR COLOR**):

ElevatedButton(
child: Text('Button'),
onPressed: () {},
style: ElevatedButton.styleFrom(primary: Colors.red),
)
小开 
 style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
primary: HexColor(HexColor.primarycolor),
textStyle: TextStyle(fontWeight: FontWeight.bold)),
小开

假设我们需要改变高举按钮背景颜色呢？提升按钮有一个样式属性和样式属性需要 ButtonStyle ()。ButtonStyle 具有 backoundColor 属性，该属性需要 Materials alStateProperty。您可以简单地通过 aterialStateProperty.all (Colors.green)分配背景颜色。让我们来探索一下 Flutter 高举按钮的背景颜色的例子。

ElevatedButton(
onPressed: () {
print('Button Pressed');
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
child: Text('Send'),
),
小开

要改变提升按钮的背景颜色和轮廓颜色也与形状的圆，然后检查这个代码:-

ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
side: BorderSide(
width: 1,
color: primaryBlue),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(
20,
))),
onPressed: () {},
child: Text(
'Use camera',
style: t3b,
),
),

这个代码看起来像这样:-enter image description here

小开

您需要设置 primary属性(在样式内部)并为其分配颜色，但是要小心，如果您没有设置 onPressed()事件，那么颜色不会改变。.

这里有一个例子:

Widget renderMyButton() {
return ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.lightBlue, // Change the color here..
elevation: 0,
// ...
),


onPressed: () {}, // This line is important to change the ElevatedButton color..
child: Container()
);
}
小开

您可以简单地在 ElevatedButton中使用这段代码

 style: ElevatedButton.styleFrom(
backgroundColor:Theme.of(context).primaryColor
),
小开

以 ElevatedButton.styleFrom为例，目前的最佳答案已经过时了。

Color? primary // Use foregroundColor instead. This feature was deprecated after v3.1.0.

相反，使用 backgroundColor参数

ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Colors.red,
),
onPressed: () {},
child: const Text('Test'),
)

提交答案