Flutter中AnimatedContainer的duration属性无法生效问题求助

问题根源 #

你把需要动画的width属性设置在了AnimatedContainer的子Container上，而非AnimatedContainer本身。AnimatedContainer只会监听自身的属性变化来触发动画，子组件的属性变动不会被它捕获，所以你的duration设置完全没起作用，子容器的宽度变化是瞬间完成的。

修复方案 #

把width、decoration这些需要动画的属性直接移到AnimatedContainer上，移除内部的多余Container：

class ProductItemWidget extends StatefulWidget {
  final int index;
  const ProductItemWidget({super.key, required this.index});

  @override
  State<ProductItemWidget> createState() => _ProductItemWidgetState();
}

class _ProductItemWidgetState extends State<ProductItemWidget> {
  double _currentWidth = 80;
  double _targetWidth = 150;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            setState(() {
              var a = _targetWidth;
              _targetWidth = _currentWidth;
              _currentWidth = a;
            });
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              AnimatedContainer(
                curve: Curves.easeInCubic,
                alignment: Alignment.centerRight,
                duration: const Duration(seconds: 4),
                width: _targetWidth,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(20)
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(_targetWidth == 80 ? "close" : "Open"),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

额外说明 #

• 注意你原代码中Duration(seconds:4000)是设置4000秒的动画时长，这显然不合理，改成Duration(seconds:4)就能看到4秒的慢速动画效果。
• AnimatedContainer的动画触发逻辑是：当自身的width、height、color、decoration等属性发生变化时，会自动根据duration和curve执行过渡动画，因此必须把需要动画的属性绑定在AnimatedContainer本身上。

内容的提问来源于stack exchange，提问作者Usman Mehsud