Flutter 中的文本溢出的示例

坚果的博客

已于 2022-05-23 09:08:42 修改

阅读量2.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter

于 2022-04-27 23:16:31 首次发布

本文链接：https://blog.csdn.net/qq_39132095/article/details/124463234

flutter 专栏收录该内容

145 篇文章

订阅专栏

本文介绍了Flutter中处理文本溢出的四种方式：clip、ellipsis、fade和visible，通过示例代码展示了如何使用TextOverflow枚举实现文本溢出效果。掌握这些技巧对于创建专业UI至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter 中的文本溢出的示例

在 Flutter 中，Text、RichText和DefaultTextStyle小部件的溢出属性指定了如何将未显示的溢出内容通知给用户。它可以被剪裁、显示省略号（三个点）、淡入淡出或溢出到其父窗口小部件之外。

可以使用TextOverflow枚举值设置溢出属性：

TextOverflow.clip：截断内容区域边缘的文本，以便截断可以发生在字符中间。
TextOverflow.ellipsis : 显示一个省略号 (‘…’) 来表示剪切的文本。省略号显示在内容区域内，减少了显示的文本量。
TextOverflow.fade：剪辑溢出的内联内容，并在行框边缘附近应用淡出效果，边缘完全透明。
TextOverflow.values：此枚举中的值列表（例如，TextOverflow.values[0]等价于TextOverflow.clip，T extOverflow.values[1]等价于TextOverflow.fade）
TextOverflow.visible：在其容器外显示溢出的文本。

TextOverflow.ellipsis和TextOverflow.fade广泛用于实际项目中。另外需要注意的是，overflow属性通常与softWrap（设置为false）和maxLines（设置为1）属性一起使用，如下所示：

Text(
     'Welcome to KindaCode.com bla bla bla',
      style: TextStyle(fontSize: 24),
      softWrap: false,
      maxLines: 1,
      overflow: TextOverflow.fade,
)

单词可能会令人困惑和无聊。为了更清楚起见，让我们看看下面的几个例子。

TextOverflow.clip

编码：

Scaffold(
        appBar: AppBar(title: const Text('KindaCode.com')),
        body: Padding(
          padding: const EdgeInsets.all(30),
          child: Container(
            child: const Text(
              'Hello there. Welcome to the Moon',
              style: TextStyle(fontSize: 30),
              maxLines: 1,
              softWrap: false,
              overflow: TextOverflow.clip,
            ),
            color: Colors.grey.shade300,
          ),
));

TextOverflow.ellipsis

Scaffold(
        appBar: AppBar(title: const Text('KindaCode.com')),
        body: Padding(
          padding: const EdgeInsets.all(30),
          child: Container(
            child: const Text(
              'Hello there. Welcome to the Moon',
              style: TextStyle(fontSize: 30),
              maxLines: 1,
              softWrap: false,
              overflow: TextOverflow.ellipsis,
            ),
            color: Colors.grey.shade300,
          ),
));

TextOverflow.fade

编码：

Scaffold(
        appBar: AppBar(title: const Text('KindaCode.com')),
        body: Padding(
          padding: const EdgeInsets.all(30),
          child: Container(
            child: const Text(
              'Hello there. Welcome to the Moon',
              style: TextStyle(fontSize: 30),
              maxLines: 1,
              softWrap: false,
              overflow: TextOverflow.fade,
            ),
            color: Colors.grey.shade300,
          ),
));

TextOverflow.visible

Scaffold(
        appBar: AppBar(title: const Text('KindaCode.com')),
        body: Padding(
          padding: const EdgeInsets.all(30),
          child: Container(
            child: const Text(
              'Hello there. Welcome to the Moon',
              style: TextStyle(fontSize: 30),
              maxLines: 1,
              softWrap: false,
              overflow: TextOverflow.visible,
            ),
            color: Colors.grey.shade300,
          ),
));

行内的多个文本小部件

当您将多个Text小部件（与其他小部件）放在一个Row中时，您可以将您的Text小部件包装在Expanded小部件中以避免Renderflex 溢出错误：

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 346 pixels on the right.

...
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
═══════════════════════════════════════════════════════════════

编码：

Scaffold(
        appBar: AppBar(title: const Text('KindaCode.com')),
        body: Container(
            padding: const EdgeInsets.all(30),
            color: Colors.yellow.shade200,
            child: Row(
              children: const [
                Expanded(
                  child: Text(
                    'Hello World. Some Long Text',
                    style: TextStyle(fontSize: 24),
                    softWrap: false,
                    maxLines: 1,
                    overflow: TextOverflow.fade,
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                CircleAvatar(
                  backgroundColor: Colors.red,
                ),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Text(
                    'This World Is So Beautiful',
                    style: TextStyle(fontSize: 24),
                    softWrap: false,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
)));