Flutter 富文本控件详解：轻松掌握 RichText 和 SelectableText

2024-02-20 22:48:05

前言

在上一篇文章中，我们介绍了 Flutter 中 Text 控件的基本用法和各种属性样式的调配。本篇文章，我们将继续深入探讨 Flutter 中的文本控件，重点介绍 RichText 和 SelectableText 这两个控件的使用。

RichText 源码解析

RichText 控件是 Flutter 中一个非常强大的文本控件，它允许您在文本中使用不同的文本样式。RichText 的源码位于 flutter/packages/flutter/lib/src/widgets/text.dart 文件中。

RichText 控件的主要属性包括：

text: 一个 TextSpan 对象，它包含了要显示的文本及其样式。
textAlign: 文本的对齐方式。
textDirection: 文本的方向。
softWrap: 是否允许文本自动换行。
overflow: 当文本超出其边界时如何处理。

RichText 的使用

要使用 RichText 控件，您首先需要创建一个 TextSpan 对象。TextSpan 对象可以包含文本、样式和子TextSpan。要创建一个 TextSpan 对象，您可以使用 TextSpan 构造函数：

TextSpan({
  String text,
  TextStyle style,
  List<TextSpan> children,
})

例如，以下代码创建了一个 TextSpan 对象，其中包含两个子TextSpan，分别具有不同的文本样式：

TextSpan(
  children: [
    TextSpan(text: 'Hello', style: TextStyle(color: Colors.red)),
    TextSpan(text: 'World', style: TextStyle(color: Colors.blue)),
  ],
)

然后，您可以将这个 TextSpan 对象作为 RichText 控件的 text 属性的值：

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'Hello', style: TextStyle(color: Colors.red)),
      TextSpan(text: 'World', style: TextStyle(color: Colors.blue)),
    ],
  ),
)

运行上面的代码，您将看到一个文本控件，其中包含两个文本片段，分别具有不同的颜色。

SelectableText 的使用

SelectableText 控件是 Flutter 中另一个非常有用的文本控件，它允许用户选择文本。SelectableText 的源码位于 flutter/packages/flutter/lib/src/widgets/text.dart 文件中。

SelectableText 控件的主要属性包括：

text: 一个 TextSpan 对象，它包含了要显示的文本及其样式。
textAlign: 文本的对齐方式。
textDirection: 文本的方向。
softWrap: 是否允许文本自动换行。
overflow: 当文本超出其边界时如何处理。
onSelectionChanged: 当用户选择文本时调用的回调函数。

要使用 SelectableText 控件，您首先需要创建一个 TextSpan 对象。TextSpan 对象可以包含文本、样式和子TextSpan。要创建一个 TextSpan 对象，您可以使用 TextSpan 构造函数：

TextSpan({
  String text,
  TextStyle style,
  List<TextSpan> children,
})

例如，以下代码创建了一个 TextSpan 对象，其中包含两个子TextSpan，分别具有不同的文本样式：

TextSpan(
  children: [
    TextSpan(text: 'Hello', style: TextStyle(color: Colors.red)),
    TextSpan(text: 'World', style: TextStyle(color: Colors.blue)),
  ],
)

然后，您可以将这个 TextSpan 对象作为 SelectableText 控件的 text 属性的值：

SelectableText(
  text: TextSpan(
    children: [
      TextSpan(text: 'Hello', style: TextStyle(color: Colors.red)),
      TextSpan(text: 'World', style: TextStyle(color: Colors.blue)),
    ],
  ),
)