问题描述
我正在显示一个动画容器列表,这些容器最初具有特定的 maxLines 文本。当用户点击容器时,我希望容器展开以完美适合整个文本
这是我的简化代码:
AnimatedContainer(
height: containerHeight,curve: Curves.easeOut,duration: Duration(milliseconds: 400),child: Column(
mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.start,children: [
Text(searchBooksList[index].title),Text('By ${searchBooksList[index].author}'),Expanded(
child: Text(
'\n${searchBooksList[index].description}',overflow: TextOverflow.ellipsis,maxLines: searchBooksList[index].expanded ? 50 : 7,)
),],),)
当用户点击容器时:
onTap: () {
setState(() {
searchBooksList[index].expanded = !searchBooksList[index].expanded;
});
},
目前,我明确提到了基于文本长度的容器高度
double len;
if(searchBooksList[index].description.length <= 500)
len=0.3;
else if (searchBooksList[index].description.length > 500 && searchBooksList[index].description.length<=750)
len = 0.6;
else if(searchBooksList[index].description.length > 750 && searchBooksList[index].description.length<=1000)
len=0.66;
else if(searchBooksList[index].description.length > 1000 && searchBooksList[index].description.length<=1500)
len=1.0;
else if(searchBooksList[index].description.length>=1500)
len=1.2;
double containerHeight = searchBooksList[index].expanded ? 1000 * len
: 1000 * 0.25;
这是现在发生的事情:
但这会在某些文本的末尾留下空行。有没有更好的方法来适应文本而不调整文本大小?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)