Text组件

Text组件是Flutter中用于显示文本的组件，通常用于展示一些简单的文本信息。但是，在Flutter中，Text组件的渲染效率并不是很高。尤其是布局限制，组件在可布局空间有限或需要复杂的样式和排版需求时可能受到限制。调整文本超出容器边界、创建自定义行高度以及实现特殊效果等操作可能需要额外的代码和处理来实现。

样式缓存

在实际的开发过程中，为了保证文字显示的统一性和可维护性，通常会重新封装一个Text组件，来满足不同的需求。 尤其是为了复用Text的样式缓存，不因为过多的设置导致大量不同布局下，不一致的组件中，文字样式的配置不一致而导致渲染性能的降低。同时显示多个相同样式的文本，可以先创建一个 TextStyle 对象并复用它。这样可以节省内存和渲染时间。

import 'package:flutter/material.dart';

class MyText extends StatelessWidget {
  const MyText(this.data, {Key? key, this.style, this.maxLines, this.color})
      : super(key: key);

  final String data;

  /// 样式
  final TextStyle? style;

  /// 最大显示行数
  final int? maxLines;

  /// 颜色
  final Color? color;

  @override
  Widget build(BuildContext context) {
    TextStyle? renderTextStyle = style ?? DefaultTextStyle.of(context).style;

    /// 是否传入颜色
    if (color != null) {
      renderTextStyle = renderTextStyle.copyWith(color: color);
    }

    return Text(
      data,
      style: renderTextStyle,
    );
  }
}

使用上面的代码渲染字体时，将使用同一个组件，这样将不必要反复定义Style并且你可以根据需要拓展更多：

const MyText("Hello");
const MyText("World", color: Colors.blue);

/// 而如果没有进行修改，则代码将被这样书写，很明显这将导致代码重复以及无法使用const constructor函数修饰：
Text(
  "World",
  style: DefaultTextStyle.of(context).style.copyWith(color: Colors.blue),
);

这样的逻辑涉及的组件还有很多需要举一反三来优化。

RichText

如果您需要更复杂的文本样式、不同格式或嵌入小部件，可以考虑使用 RichText 组件。与 Text 不同，它允许在一段文本中应用多个样式并混合其他小部件。而避免使用 Text 组件，并在复杂的布局中嵌套实现RichText.这有助于减少不必要的重建和渲染开销。
TextSpan 是一个灵活的组件，可以用于创建富文本样式和嵌套小部件。通过使用 TextSpan ，您可以在一段文本中应用不同的样式、添加连续或离散的小部件以及设置交互事件。
创建 TextSpan 对象并定义您想要呈现的富文本结构。以下是一个简单的示例：

import 'package:flutter/material.dart';

TextSpan textSpan = TextSpan(
  text: 'Hello ',
  style: TextStyle(color: Colors.black),
  children: <TextSpan>[
    TextSpan(
      text: 'World',
      style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
    ),
    TextSpan(
      text: '!',
      style: TextStyle(color: Colors.red),
    ),
  ],
);

上面的代码创建了一个包含 'Hello ' 文本和两个子元素（即 'World' 和 '!'）的 TextSpan 对象。每个子元素都有自己的样式。

在适当的位置使用 RichText 组件，并将 text 属性设置为您之前创建的 TextSpan 对象。

RichText richText = RichText(text: textSpan);

在这里，我们将创建出来的 textSpan 分配给一个新建的 RichText 小部件。

在布局中使用 richText 将富文本显示出来。 例如，在一个 ConstrainedBox 中：

ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 200), child: richText);

通过将 richText 放置在适当的布局小部件中（如 Container、Column 或 Row），您可以在应用程序中显示富文本。 通过修改 TextSpan 对象的属性，您可以根据需要更改样式，添加子元素或设置交互事件。这使得创建具有复杂样式和结构的富文本变得容易。 请注意，某些小部件可能需要使用 RichText 才能正确渲染和显示 TextSpan 内容。因此，在选择使用 TextSpan 时需要考虑特定上下文和需求。