flutter如何实现richtext富文本功能

在Flutter中如何实现RichText富文本功能？我在开发时需要显示不同样式的文本组合，比如部分文字加粗、变色或添加下划线。官方文档提到可以使用RichText和TextSpan，但不太清楚具体怎么嵌套使用。有没有完整的代码示例展示如何实现多种样式混合的文本效果？另外，这种富文本能否支持点击事件？

2 回复

Flutter 中可使用 RichText 或 Text.rich 组件实现富文本。通过 TextSpan 嵌套不同样式，如颜色、字体、点击事件等，灵活构建多样式文本。

更多关于flutter如何实现richtext富文本功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 中实现富文本功能主要通过 RichText 或 Text.rich 组件，结合 TextSpan 定义不同样式的文本片段。

核心步骤：

  1. 使用 RichText 或 Text.rich 作为容器。
  2. 通过 TextSpan 的 children 嵌套多个文本片段。
  3. 为每个 TextSpan 单独设置样式（颜色、字体、背景等）。

示例代码：

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style, // 继承默认样式
    children: <TextSpan>[
      TextSpan(text: '普通文本 '),
      TextSpan(
        text: '红色粗体',
        style: TextStyle(
          color: Colors.red,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(
        text: '带背景色',
        style: TextStyle(
          backgroundColor: Colors.yellow,
          fontSize: 16,
        ),
      ),
    ],
  ),
)

进阶功能：

  • 点击事件：在 TextSpan 中添加 recognizer: TapGestureRecognizer()..onTap = (){} 实现可点击文本。
  • 混合样式：通过 WidgetSpan 嵌入图标或按钮等组件。
  • 解析富文本：使用 flutter_html 等第三方库解析 HTML 格式文本。

注意事项：

  • 默认样式会继承外层 TextStyle，可通过 style 参数覆盖。
  • 如需复杂排版（如文字环绕图片），可结合 WidgetSpan 和 Stack 实现。

这是最基础的富文本实现方式，可满足大部分差异化样式需求。

回到顶部