我想设置列表中两个项目之间的间隙。我想过使用AminatedContainer,其高度最初为零,但我不熟悉如何使其工作。我的代码目前是:
new AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: App.itemSelected==id ? 50.0 : 0.0,
curve: Curves.fastOutSlowIn,
),
这确实改变了容器的高度,但没有像我希望的那样以动画方式改变。感谢任何帮助!
答案 0 :(得分:5)
我不确定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;
})),
],
)
],)
,)
);
}
}
答案 1 :(得分:0)
您可以使用AnimatedSize来实现此目的。
https://docs.flutter.io/flutter/widgets/AnimatedSize-class.html