You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.13 08:04:12