Flutter 中的文本溢出的示例

Posted 2022-04-29 大前端之旅

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,
                  ),
                ),
              ],
)));

参考

• TextOverflow 枚举(flutter.dev)
• 省略号（维基百科）
• 文本类(flutter.dev)
• RichText 类(flutter.dev)

结论

我们已经学习了如何在 Flutter 中控制文本溢出。这些知识对于构建整洁、优雅和专业的用户界面非常重要。