Flutter GridView子项描述文本省略号问题:需多行显示后末尾省略
解决Flutter GridView子项中描述文本多行溢出显示省略号的问题
你遇到的问题其实是因为Text组件默认的maxLines属性值为1,所以即使你用Expanded包裹了它,它也只会显示一行内容并在末尾加省略号。要实现“占满垂直可用空间后,最后一行末尾显示省略号”的效果,只需要调整Text的两个属性即可:
- 设置
maxLines为一个足够大的数值(比如100),让文本可以自动换行直到填满Expanded分配的空间 - 保持
overflow: TextOverflow.ellipsis不变,确保内容超出空间时在最后一行显示省略号
修改后的完整代码如下:
Card( color: Colors.white, child: Padding( padding: const EdgeInsets.all(20.0), child: Column( mainAxisSize: MainAxisSize.max, children: <Widget>[ Text(data[position]), Expanded( child: Text( desctiption, overflow: TextOverflow.ellipsis, // 设置足够大的maxLines,让文本能填满可用空间 maxLines: 100, // 确保文本自动换行(默认就是true,可省略) softWrap: true, ), ), MaterialButton( child: Text("open"), ) ], ), ), );
原理说明:Expanded会根据Column的布局规则,给内部的Text分配剩余的垂直可用空间。当Text的maxLines设为较大值时,它会自动换行填充这个空间;一旦内容的总行数超出了空间能容纳的行数,overflow: TextOverflow.ellipsis就会生效,在最后一行的末尾显示省略号。
内容的提问来源于stack exchange,提问作者AdrianoCelentano
相关产品推荐
相关产品推荐

