Flutter 在点击时设置调整ListView项目大小的动画

我在ListView项中有一个多行文本（）。 默认情况下，我只想显示一行。当用户点击此项时，我希望它显示所有行。我通过将文本小部件的maxLines属性动态设置为1或null来实现这一点。 这很好，但是调整大小会立即发生，但是我想设置这个转换的动画

下面是一些示例代码：

class ListPage extends StatelessWidget {
  const ListPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List Example'),
      ),
      body: ListView.separated(
        itemBuilder: (context, index) {
          return ListItem();
        },
        itemCount: 3,
        separatorBuilder: (_, int index) => Divider(),
      ),
    );
  }
}

class ListItem extends StatefulWidget {
  ListItem({Key key}) : super(key: key);

  @override
  _ListItemState createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  bool _expanded;

  @override
  void initState() {
    _expanded = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          _expanded = !_expanded;
        });
      },
      child: Text(
        'Line1\nLine2\nLine3',
        maxLines: _expanded ? null : 1,
        softWrap: true,
        style: const TextStyle(fontSize: 22),
      ),
    );    
  }
}

class ListPage扩展了无状态小部件{
const ListPage（{Key}）：super（Key:Key）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“列表示例”），
),
正文：ListView.com(
itemBuilder：（上下文，索引）{
返回ListItem（）；
},
物品计数：3，
separatorBuilder:（z，int index）=>Divider（），
),
);
}
}
类ListItem扩展StatefulWidget{
ListItem（{Key}）：超级（Key:Key）；
@凌驾
_ListItemState createState（）=>\u ListItemState（）；
}
类_ListItemState扩展状态{
布尔乌扩张；
@凌驾
void initState（）{
_扩展=假；
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
回墨槽(
onTap:（）{
设置状态（）{
_扩展=！\u扩展；
});
},
子：文本(
“Line1\nLine2\nLine3”，
maxLines:_已展开？空值：1，
软包装：是的，
样式：常量文本样式（字体大小：22），
),
);    
}
}

我还尝试过使用动画切换器，如下所示：

class ListPage extends StatelessWidget {
  const ListPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List Example'),
      ),
      body: ListView.separated(
        itemBuilder: (context, index) {
          return ListItem();
        },
        itemCount: 3,
        separatorBuilder: (_, int index) => Divider(),
      ),
    );
  }
}

class ListItem extends StatefulWidget {
  ListItem({Key key}) : super(key: key);

  @override
  _ListItemState createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  bool _expanded;
  Widget _myAnimatedWidget;

  @override
  void initState() {
    _expanded = false;
    _myAnimatedWidget = ExpandableText(key: UniqueKey(), expanded: _expanded);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          _expanded = !_expanded;
          _myAnimatedWidget =
              ExpandableText(key: UniqueKey(), expanded: _expanded);
        });
      },
      child: AnimatedSwitcher(
        duration: Duration(milliseconds: 2000),
        child: _myAnimatedWidget,
      ),
    );
  }
}

class ExpandableText extends StatelessWidget {
  const ExpandableText({Key key, this.expanded}) : super(key: key);
  final expanded;

  @override
  Widget build(BuildContext context) {
    return Text(
      'Line1\nLine2\nLine3',
      maxLines: expanded ? null : 1,
      softWrap: true,
      style: const TextStyle(fontSize: 22),
    );
  }
}

class ListPage扩展了无状态小部件{
const ListPage（{Key}）：super（Key:Key）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“列表示例”），
),
正文：ListView.com(
itemBuilder：（上下文，索引）{
返回ListItem（）；
},
物品计数：3，
separatorBuilder:（z，int index）=>Divider（），
),
);
}
}
类ListItem扩展StatefulWidget{
ListItem（{Key}）：超级（Key:Key）；
@凌驾
_ListItemState createState（）=>\u ListItemState（）；
}
类_ListItemState扩展状态{
布尔乌扩张；
Widget _myAnimatedWidget；
@凌驾
void initState（）{
_扩展=假；
_myAnimatedWidget=ExpandableText（键：UniqueKey（），展开：_展开）；
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
回墨槽(
onTap:（）{
设置状态（）{
_扩展=！\u扩展；
_myAnimatedWidget=
可展开文本（键：UniqueKey（），展开：_展开）；
});
},
孩子：动画切换器(
持续时间：持续时间（毫秒：2000），
孩子：_myAnimatedWidget，
),
);
}
}
类ExpandableText扩展了无状态小部件{
const ExpandableText（{Key-Key，this.expanded}）：super（Key:Key）；
最终扩大；
@凌驾
小部件构建（构建上下文）{
返回文本(
“Line1\nLine2\nLine3”，
maxLines:扩展？空值：1，
软包装：是的，
样式：常量文本样式（字体大小：22），
);
}
}

这会设置文本小部件的动画，但ListView行仍会立即调整大小

我犯了什么错？对于我的问题，设置maxLines属性的方法可能是错误的吗

谢谢你的帮助

---

祝你今天愉快

多亏了乔的评论，我找到了正确的答案：

---

我只需要将我的小部件包装在AnimatedSize（）小部件中。仅此而已：）

您是否尝试过用动画容器包围整个小部件，并用用户的相同点击改变其高度？@Joãosares非常感谢！你的回答使我走上了正确的轨道。使用AnimatedContainer，动画效果很好，但由于我有动态内容，所以我无法判断它应该是多大。但我刚刚找到了动画大小，这正是我需要的！非常感谢您的回答！我很高兴能帮上忙。祝你的应用程序好运！