在 AnimatedSize 组件上添加 key 属性,并将其值与容器大小的唯一标识关联。这将导致在减小大小时重新渲染 AnimatedSize,从而触发缩小动画的执行。
示例代码如下所示:
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State {
double _containerSize = 200.0;
void _shrinkContainer() {
setState(() {
_containerSize = 100.0;
});
}
void _enlargeContainer() {
setState(() {
_containerSize = 200.0;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedSize(
key: ValueKey(_containerSize), // 添加 key 属性
duration: Duration(seconds: 1),
vsync: this,
child: Container(
width: _containerSize,
height: _containerSize,
color: Colors.blue,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: _shrinkContainer,
child: Text('缩小'),
),
SizedBox(width: 20.0),
RaisedButton(
onPressed: _enlargeContainer,
child: Text('放大'),
),
],
),
],
);
}
}