Flutter：如何根据可用空间裁剪文本？

Posted 2023-02-23

【中文标题】Flutter：如何根据可用空间裁剪文本？

【英文标题】：Flutter: How to crop text depending on available space?

【发布时间】：2018-09-29 11:33:40

【问题描述】：

如何根据可用空间裁剪文本？

有一个类似的问题here，但没有有效的答案。

目前，这段代码

            return new GridTile(
              child: new Card(
                elevation: 3.0,
                child: new Container(
                  padding: new EdgeInsets.all(10.0),
                  child: new Column(
                    children: <Widget>[
                      Text(
                        document['title'],
                        style: new TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text(
                        document['text'],
                      ),
                    ],
                  ),
                ),
              )
            );

给出这个结果：

我尝试使用 overflow: TextOverflow.ellipsis，但文本变成了 1 行长。指定文本行长度是个坏主意，因为在不同的屏幕尺寸上结果会有所不同。

如何使文本裁剪、适合或包裹到可用空间中？

【问题讨论】：

决定改用 ListView 和 Card - 看起来也更好

【参考方案1】：

设置overflow 行为应该这样做

  new Text(
    widget.text,
    // softWrap: true,
    overflow: TextOverflow.fade,
  )

另见Flutter: How to hide or show more text within certain length

【讨论】：

试过溢出：TextOverflow.fade，但是什么都没变，底部还是溢出了88像素

溢出实际上是来自Text 小部件，还是来自父母之一？

github.com/flutter/flutter/issues/15465#issuecomment-382458700 看起来与您试图完成的任务相似，也许它包含一些有用的东西。

@GünterZöchbauer 它可以工作，但您也需要将maxLines: 1 添加到您的Text。但问题是它垂直淡化文本，我在寻找水平。你能帮我吗？编辑：设置softWrap: false 似乎有效。

【参考方案2】：

将文本小部件包装在 Expanded 或 Flexible 小部件中并使用 overflow.ellipsis 这对我有用

Column(
    children: <Widget>[
         Flexible(
             child: Text(
             "Some Very long Text or random generated strings ",
             overflow: TextOverflow.ellipsis,
             softWrap: true,
             ),
        ),
    ],
 ),