当尝试动画一个ElevatedButton时得到这个错误

Question

我目前正在尝试动画一个elevatedButton，没有太花哨的只是试图动画的升高属性。所以我在VS代码中搭建了一个新的扑动启动器应用程序，并添加了动画和动画控制器的相关代码，但我一直得到这个错误:类型"double"不是类型"MaterialStateProperty<double?>?"我不明白为什么，这是我的代码

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController animationController;
Animation animation;
@override void initState() {      
super.initState();
animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 5),
);
animation = Tween(begin: 50.0, end: 150.0).animate(
CurvedAnimation(
parent: animationController, 
curve: Interval(0.0, 1.0, curve: Curves.easeInOut),
),
);
}
@override void dispose() {
animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: (){
animationController.forward();
}, 
child: Text("Button Text"),
style: ButtonStyle(
elevation: animation.value,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

Answer 1

尝试使用MaterialStateProperty.all<double>(animation.value),在按钮样式

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
AnimationController animationController;
Animation animation;
@override void initState() {
super.initState();
animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 5),
);
animation = Tween(begin: 50.0, end: 150.0).animate(
CurvedAnimation(
parent: animationController,
curve: Interval(0.0, 1.0, curve: Curves.easeInOut),
),
);
}
@override void dispose() {
animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: (){
animationController.forward();
},
child: Text("Button Text"),
style: ButtonStyle(
// here you will change the `MaterialStateProperty` value 
elevation: MaterialStateProperty.all<double>(animation.value),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

Answer 2

根据ButtonStyle文档:

许多ButtonStyle属性是MaterialStateProperty对象，根据按钮的状态解析不同的值。例如，颜色属性是用MaterialStateProperty定义的，可以根据按钮是否被按下、悬停、聚焦、禁用等来解析为不同的颜色。

所以你需要做的是传递animation value作为一个MaterialStateProperty。

在你的例子中，它看起来像这样:

style: ButtonStyle(  
elevation: MaterialStateProperty.all(animation.value), 
),

查看MaterialStateProperty类文档以获取更多信息。