flutter适配openHarmony RichText 富文本

摘要本文介绍了Flutter中RichText组件的使用方法，通过多个示例展示富文本的实现技巧。基础示例演示了TextSpan的嵌套样式，链接文本示例展示可点击文本的实现，复杂富文本示例组合多种样式和交互。还包含关键词高亮和格式化文本的实现方法，以及高级应用场景如响应式设计、动画效果等。RichText通过TextSpan树结构支持多样式文本组合，配合手势识别器可实现丰富的文本交互效果。

ZH1545589131

891人浏览 · 2025-12-03 22:38:57

ZH1545589131 · 2025-12-03 22:38:57 发布

在这里插入图片描述

案例概述

RichText 用于显示具有多种样式的文本。本案例展示了如何使用 RichText 创建富文本。

核心概念

1. RichText 基础

RichText 是富文本组件。

2. TextSpan

TextSpan 定义文本的样式。

3. 嵌套样式

可以嵌套不同样式的文本。

代码详解

示例 1：基础富文本

class BasicRichTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: const TextSpan(
        text: '这是',
        style: TextStyle(color: Colors.black),
        children: [
          TextSpan(
            text: '富文本',
            style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
          ),
          TextSpan(text: '示例'),
        ],
      ),
    );
  }
}

代码解释： RichText 通过 TextSpan 树实现富文本。每个 TextSpan 可有不同的样式。children 属性嵌套子 TextSpan。这里混合黑色、红色加粗等样式。

示例 2：链接文本

class LinkTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: '访问',
        style: const TextStyle(color: Colors.black),
        children: [
          TextSpan(
            text: ' Flutter 官网',
            style: const TextStyle(
              color: Colors.blue,
              decoration: TextDecoration.underline,
            ),
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                // 打开链接
              },
          ),
          const TextSpan(text: '了解更多'),
        ],
      ),
    );
  }
}

代码解释： TextSpan 的 recognizer 属性支持手势识别。这里使用 TapGestureRecognizer 使特定文本可点击。常用于实现文本链接、@提及等交互。

示例 3：复杂富文本

class ComplexRichTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        children: [
          const TextSpan(
            text: '标题',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
          const TextSpan(text: '\n'),
          const TextSpan(
            text: '这是一个',
            style: TextStyle(color: Colors.black),
          ),
          TextSpan(
            text: '复杂',
            style: const TextStyle(
              color: Colors.red,
              fontWeight: FontWeight.bold,
            ),
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                // 处理点击
              },
          ),
          const TextSpan(
            text: '的富文本示例。',
            style: TextStyle(color: Colors.black),
          ),
        ],
      ),
    );
  }
}

代码解释： 这个示例展示了复杂富文本的组合：不同大小、颜色、加粗的文本，加上可点击的部分。通过嵌套 TextSpan 和 recognizer，可实现复杂的文本交互。

示例 4：高亮文本

class HighlightTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final text = '这是一个高亮文本示例';
    final highlightWord = '高亮';
    final parts = text.split(highlightWord);

    return RichText(
      text: TextSpan(
        children: [
          for (int i = 0; i < parts.length; i++) ...[
            TextSpan(
              text: parts[i],
              style: const TextStyle(color: Colors.black),
            ),
            if (i < parts.length - 1)
              TextSpan(
                text: highlightWord,
                style: const TextStyle(
                  color: Colors.white,
                  backgroundColor: Colors.yellow,
                ),
              ),
          ],
        ],
      ),
    );
  }
}

代码解释： 这个示例通过字符串分割动态生成 TextSpan，实现关键词高亮。split 将文本分割，然后在循环中交替插入普通文本和高亮文本。这种模式常用于搜索结果、代码高亮等。

示例 5：格式化文本

class FormattedTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: const TextSpan(
        children: [
          TextSpan(
            text: '普通文本 ',
            style: TextStyle(color: Colors.black),
          ),
          TextSpan(
            text: '粗体文本 ',
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(
            text: '斜体文本 ',
            style: TextStyle(
              color: Colors.black,
              fontStyle: FontStyle.italic,
            ),
          ),
          TextSpan(
            text: '下划线文本 ',
            style: TextStyle(
              color: Colors.black,
              decoration: TextDecoration.underline,
            ),
          ),
          TextSpan(
            text: '删除线文本',
            style: TextStyle(
              color: Colors.black,
              decoration: TextDecoration.lineThrough,
            ),
          ),
        ],
      ),
    );
  }
}