如何为Flutter的Wrap组件添加动画？解决文本更新时高度变化问题

嘿，你遇到的问题很常见——当Wrap内部的文本内容更新导致高度变化时，原本的AnimatedContainer没触发预期的过渡动画。这是因为AnimatedContainer需要明确感知到自身尺寸的主动变化，而当前的层级结构里，它并没有正确捕捉到内部文本更新带来的高度变化。

解决思路：用AnimatedSize处理尺寸变化动画 #

Flutter提供的AnimatedSize组件就是专门用来处理子组件尺寸变化的动画工具，它会自动监听子节点的尺寸变动，并生成平滑的过渡效果。我们只需要把会随文本变化而改变高度的核心区域（也就是包含文本的Column）用AnimatedSize包裹起来，就能实现想要的动画效果。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomePageCardOne extends StatefulWidget {
  @override
  _HomePageCardOneState createState() => _HomePageCardOneState();
}

class _HomePageCardOneState extends State<HomePageCardOne> {
  String image = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Khajuraho_-_Kandariya_Mahadeo_Temple.jpg/1200px-Khajuraho_-_Kandariya_Mahadeo_Temple.jpg";
  String dummyText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. scrambled it to make a type specimen book.";

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: <Widget>[
        Container(
          color: Color.fromRGBO(251,246,236,1),
          child: AnimatedSize(
            // 设置动画时长和平滑曲线
            duration: Duration(milliseconds: 500),
            curve: Curves.easeInOut,
            child: Column(
              mainAxisSize: MainAxisSize.min, // 关键：让Column仅占用实际需要的高度
              children: <Widget>[
                RaisedButton(
                  child: Text("Animate please"),
                  onPressed: () => updateText(),
                ),
                Image.network(
                  image,
                  height: 150,
                  fit: BoxFit.fill,
                  width: MediaQuery.of(context).size.width,
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8, left: 8, bottom: 2),
                    child: Text(
                      "Temple Name",
                      style: TextStyle(
                        color: Colors.blue,
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 8, bottom: 4, top: 2),
                  child: Text(dummyText),
                ),
                GestureDetector(
                  onTap: () => updateText(),
                  child: Text("press me"),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  void updateText() {
    setState(() {
      dummyText += dummyText;
    });
  }
}

关键改动说明 #

1. 替换AnimatedContainer为AnimatedSize：AnimatedSize是专门针对子组件尺寸变化设计的动画组件，比AnimatedContainer更适配这个场景。
2. 给Column添加mainAxisSize: MainAxisSize.min：确保Column只占用它实际需要的高度，让AnimatedSize能精准捕捉到文本更新后的高度变化。
3. 优化动画参数：把原有的10秒时长调整为更合理的500毫秒，并添加平滑的曲线，提升动画的自然感。

这样修改后，每当你点击按钮更新文本时，整个卡片的高度就会平滑过渡到新的高度啦！

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