在点击时调整列表视图项的大小以动画形式显示

Question

>我在ListView项中有一个多行Text((。 默认情况下，我只想显示 1 行。当用户点击此项目时，我希望它显示所有行。我通过将文本小部件的 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(
'Line1nLine2nLine3',
maxLines: _expanded ? null : 1,
softWrap: true,
style: const TextStyle(fontSize: 22),
),
);    
}
}

我也已经尝试过使用这样的AnimatedSwitcher：

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(
'Line1nLine2nLine3',
maxLines: expanded ? null : 1,
softWrap: true,
style: const TextStyle(fontSize: 22),
);
}
}

这将对文本小部件进行动画处理，但列表视图行仍会立即调整大小。

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

感谢您的帮助！

祝你有美好的一天！

Answer 1

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

我只需要将我的 Widget 包装在 AnimatedSize(( widget 中。仅此而已:)