我想为列表中两个项目之间的间隙设置动画。我想过使用高度最初为零的 AminatedContainer,但我不熟悉如何进行这项工作。我现在的代码是:
new AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: App.itemSelected==id ? 50.0 : 0.0,
curve: Curves.fastOutSlowIn,
),
这确实会改变 Container 的高度,但不会像我希望的那样以动画方式改变。如有任何帮助,我们将不胜感激!
最佳答案
我不确定 AnimatedSize
是否适合您的用例,但我添加了一个关于如何使用它制作简单动画的示例:
由于录音的原因,颜色有点不对,但你应该可以自己测试一下。
class MyAppState extends State<MyApp> with TickerProviderStateMixin {
double _height = 50.0;
double _width = 20.0;
var _color = Colors.blue;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new AnimatedSize(
curve: Curves.fastOutSlowIn, child: new Container(
width: _width,
height: _height,
color: _color,
), vsync: this, duration: new Duration(seconds: 2),),
new Divider(height: 35.0,),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new IconButton(
icon: new Icon(Icons.arrow_upward, color: Colors.green,),
onPressed: () =>
setState(() {
_color = Colors.green;
_height = 95.0;
})),
new IconButton(
icon: new Icon(Icons.arrow_forward, color: Colors.red,),
onPressed: () =>
setState(() {
_color = Colors.red;
_width = 45.0;
})),
],
)
],)
,)
);
}
}
关于dart - AnimatedContainer 可以为其高度设置动画吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46625105/