Flutter 中的 Text 小部件：全面指南

Flutter 中的 Text 小部件：全面指南

在 Flutter 中，Text 是用于显示文本的基础小部件。它不仅简单易用，而且提供了丰富的定制选项，包括样式、对齐、行间距等。本文将详细介绍如何使用 Text 小部件，并探索其高级特性。

基础用法

Text 小部件最基本的用法是显示一段文本：

Text('Hello, World!')

这将在屏幕上渲染出 “Hello, World!” 文本。

文本样式

Text 小部件的样式可以通过 style 属性进行定制：

Text(
  'Hello, World!',
  style: TextStyle(
    fontSize: 24.0,
    fontWeight: FontWeight.bold,
    color: Colors.green,
  ),
)

上述代码将文本设置为大号、加粗的绿色文字。

常用样式属性

• fontSize: 字体大小。
• fontWeight: 字体粗细。
• color: 文本颜色。
• fontFamily: 字体家族。
• textBaseline: 文本基线。
• height: 行高。

文本对齐方式

Text 小部件还支持设置文本的对齐方式：

Text(
  'Hello, World!',
  textAlign: TextAlign.center,
  style: TextStyle(fontSize: 24.0),
)

上述代码将文本居中对齐。

常用对齐方式

• TextAlign.left: 左对齐。
• TextAlign.right: 右对齐。
• TextAlign.center: 居中对齐。
• TextAlign.justify: 两端对齐。
• TextAlign.start: 从开始位置对齐（取决于文本方向）。
• TextAlign.end: 从结束位置对齐（取决于文本方向）。

行间距和字间距

Text 小部件还允许你设置行间距（lineHeight）和字间距（letterSpacing）：

Text(
  'Hello, World!',
  style: TextStyle(
    fontSize: 18.0,
    letterSpacing: 2.0,
  ),
)

换行和软换行

默认情况下，Text 小部件中的文本不会换行。如果文本超出了其父级小部件的宽度，它将被截断。要使文本自动换行，可以设置 softWrap 属性为 true：

Text(
  'This is a long text that will wrap to the next line because softWrap is true.',
  softWrap: true,
)

文本溢出

如果文本超出了小部件的边界，除了自动换行外，还可以设置 overflow 属性来定义如何处理溢出：

Text.rich(
  TextSpan(
    text: 'This text will fade out when it overflows.',
    style: TextStyle(overflow: TextOverflow.fade),
  ),
)

常用溢出选项

• TextOverflow.clip: 截断并裁剪文本。
• TextOverflow.ellipsis: 用省略号表示溢出的文本。
• TextOverflow.fade: 使溢出的文本逐渐淡出。
• TextOverflow.visible: 显示全部文本，可能会超出边界。

富文本

Text 小部件还支持富文本（Text.rich），允许在同一行文本中使用不同的样式：

Text.rich(
  TextSpan(
    children: [
      TextSpan(text: 'Hello, ', style: TextStyle(fontSize: 24.0)),
      TextSpan(text: 'World!', style: TextStyle(fontSize: 32.0, color: Colors.blue)),
    ],
  ),
)

性能考虑

对于显示大量文本的情况，考虑使用 ListView 或 Column 包裹 Text 小部件，以提高滚动性能。

结语

Text 小部件是 Flutter 中显示文本的基础工具，提供了丰富的定制选项，从基本的样式到复杂的富文本布局。掌握 Text 小部件的使用，可以帮助你创建出既美观又实用的文本显示界面。