在这里插入图片描述
在这里插入图片描述

作者：孟少康（世人万千）
仓库地址：https://gitcode.com/feng8403000/FlutterfromBeginnertoAdvancedForHarmonyOS.git
联系邮箱：372699828@qq.com

概述

在Flutter中，普通的Text组件只能显示单一样式的文本。当需要在一段文本中使用多种样式时，就需要使用RichText组件。RichText组件允许我们在同一段文本中混合使用不同的字体、颜色、大小等样式，甚至可以嵌入Widget。

基础用法

最简单的RichText

RichText(
  text: const TextSpan(
    text: "Hello ",
    style: TextStyle(color: Colors.black, fontSize: 16),
    children: [
      TextSpan(
        text: "World",
        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
      ),
    ],
  ),
);

这段代码会显示"Hello World"，其中"Hello"使用默认样式，"World"使用蓝色加粗样式。

完整的RichText示例

RichText(
  text: const TextSpan(
    text: "这是一段",
    style: TextStyle(color: Colors.black, fontSize: 16),
    children: [
      TextSpan(
        text: "富文本",
        style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: "内容，支持",
      ),
      TextSpan(
        text: "多种样式",
        style: TextStyle(color: Colors.blue, fontStyle: FontStyle.italic),
      ),
      TextSpan(
        text: "混合使用。",
      ),
    ],
  ),
);

TextSpan详解

TextSpan的构造函数

TextSpan({
  this.text,
  this.children,
  this.style,
  this.recognizer,
  this.semanticsLabel,
});

text属性

text属性定义当前TextSpan显示的文本内容。

TextSpan(text: "普通文本");

children属性

children属性是一个TextSpan列表，用于嵌套子TextSpan。

TextSpan(
  text: "父文本",
  children: [
    TextSpan(text: "子文本1"),
    TextSpan(text: "子文本2"),
  ],
);

style属性

style属性定义当前TextSpan的样式。

TextSpan(
  text: "带样式的文本",
  style: TextStyle(
    color: Colors.red,
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
);

recognizer属性

recognizer属性用于处理文本的手势事件，通常与TapGestureRecognizer配合实现点击事件。

TapGestureRecognizer _recognizer = TapGestureRecognizer()
  ..onTap = () {
    print("文本被点击");
  };

RichText(
  text: TextSpan(
    text: "可点击的文本",
    style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
    recognizer: _recognizer,
  ),
);

WidgetSpan详解

嵌入图片

RichText(
  text: const TextSpan(
    text: "这是一段包含",
    style: TextStyle(color: Colors.black, fontSize: 16),
    children: [
      WidgetSpan(
        child: Icon(Icons.favorite, color: Colors.red, size: 16),
      ),
      TextSpan(text: "图标的文本"),
    ],
  ),
);

嵌入自定义Widget

RichText(
  text: const TextSpan(
    text: "价格：",
    style: TextStyle(color: Colors.black, fontSize: 16),
    children: [
      WidgetSpan(
        child: Text(
          "¥99",
          style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
        ),
      ),
      TextSpan(text: " 元"),
    ],
  ),
);

WidgetSpan的对齐方式

RichText(
  text: const TextSpan(
    text: "文本",
    children: [
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.yellow, size: 20),
        alignment: PlaceholderAlignment.middle,
      ),
    ],
  ),
);

alignment属性支持的值：

对齐方式 说明
PlaceholderAlignment.top 顶部对齐
PlaceholderAlignment.middle 居中对齐
PlaceholderAlignment.bottom 底部对齐
PlaceholderAlignment.baseline 基线对齐

RichText属性详解

textAlign属性

textAlign属性控制文本的对齐方式。

RichText(
  text: const TextSpan(text: "需要对齐的文本"),
  textAlign: TextAlign.center,
);

textDirection属性

textDirection属性指定文本的书写方向。

RichText(
  text: const TextSpan(text: "Hello World"),
  textDirection: TextDirection.ltr,
);

overflow属性

overflow属性定义文本溢出时的处理方式。

RichText(
  text: const TextSpan(text: "这是一段很长很长的文本内容"),
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

maxLines属性

maxLines属性限制文本显示的最大行数。

RichText(
  text: const TextSpan(text: "这是一段多行文本内容"),
  maxLines: 2,
);

locale属性

locale属性用于指定文本的区域设置。

RichText(
  text: const TextSpan(text: "Hello World"),
  locale: const Locale("zh", "CN"),
);

实际应用示例

带表情的文本

RichText(
  text: const TextSpan(
    text: "今天天气",
    style: TextStyle(color: Colors.black, fontSize: 16),
    children: [
      WidgetSpan(
        child: Icon(Icons.wb_sunny, color: Colors.orange, size: 20),
        alignment: PlaceholderAlignment.middle,
      ),
      TextSpan(text: "很好！"),
    ],
  ),
);

价格显示

RichText(
  text: const TextSpan(
    text: "现价",
    style: TextStyle(color: Colors.grey, fontSize: 14),
    children: [
      TextSpan(
        text: "¥",
        style: TextStyle(color: Colors.red, fontSize: 16, fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: "99",
        style: TextStyle(color: Colors.red, fontSize: 28, fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: ".00",
        style: TextStyle(color: Colors.red, fontSize: 16, fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: " 原价¥199.00",
        style: TextStyle(
          color: Colors.grey,
          fontSize: 14,
          decoration: TextDecoration.lineThrough,
        ),
      ),
    ],
  ),
);

带链接的文本

TapGestureRecognizer _linkRecognizer = TapGestureRecognizer()
  ..onTap = () {
    print("点击了链接");
  };

RichText(
  text: TextSpan(
    text: "请阅读",
    style: const TextStyle(color: Colors.black, fontSize: 16),
    children: [
      TextSpan(
        text: "用户协议",
        style: const TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
        recognizer: _linkRecognizer,
      ),
      const TextSpan(text: "和"),
      TextSpan(
        text: "隐私政策",
        style: const TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
        recognizer: _linkRecognizer,
      ),
      const TextSpan(text: "。"),
    ],
  ),
);

标签文本

RichText(
  text: const TextSpan(
    children: [
      WidgetSpan(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(4),
          ),
          child: Text(
            "热门",
            style: TextStyle(color: Colors.white, fontSize: 12),
          ),
        ),
        alignment: PlaceholderAlignment.middle,
      ),
      TextSpan(
        text: " 热门文章标题",
        style: TextStyle(color: Colors.black, fontSize: 16),
      ),
    ],
  ),
);

评分显示

RichText(
  text: const TextSpan(
    text: "评分：",
    style: TextStyle(color: Colors.black, fontSize: 16),
    children: [
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.yellow, size: 20),
        alignment: PlaceholderAlignment.middle,
      ),
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.yellow, size: 20),
        alignment: PlaceholderAlignment.middle,
      ),
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.yellow, size: 20),
        alignment: PlaceholderAlignment.middle,
      ),
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.yellow, size: 20),
        alignment: PlaceholderAlignment.middle,
      ),
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.grey, size: 20),
        alignment: PlaceholderAlignment.middle,
      ),
      TextSpan(text: " 4.0"),
    ],
  ),
);

复杂的富文本布局

RichText(
  text: const TextSpan(
    text: "用户",
    style: TextStyle(color: Colors.black, fontSize: 16),
    children: [
      TextSpan(
        text: "@username",
        style: TextStyle(color: Colors.blue),
      ),
      TextSpan(text: " 在"),
      TextSpan(
        text: "#话题标签#",
        style: TextStyle(color: Colors.orange),
      ),
      TextSpan(text: "中发布了一条新动态："),
    ],
  ),
);

性能优化建议

避免过多的嵌套

// 不好的做法：嵌套过深
RichText(
  text: TextSpan(
    text: "A",
    children: [
      TextSpan(
        text: "B",
        children: [
          TextSpan(
            text: "C",
            children: [
              // ... 更多嵌套
            ],
          ),
        ],
      ),
    ],
  ),
);

// 好的做法：扁平化结构
RichText(
  text: const TextSpan(
    children: [
      TextSpan(text: "A"),
      TextSpan(text: "B"),
      TextSpan(text: "C"),
    ],
  ),
);

使用常量TextSpan

// 好的做法：使用const修饰
RichText(
  text: const TextSpan(
    text: "常量文本",
    style: TextStyle(fontSize: 16),
  ),
);

合理使用WidgetSpan

WidgetSpan会增加布局复杂度，尽量避免在大量文本中频繁使用。

// 谨慎使用WidgetSpan
RichText(
  text: const TextSpan(
    children: [
      WidgetSpan(child: Icon(Icons.star)), // 每个图标都是一个Widget
      WidgetSpan(child: Icon(Icons.star)),
      WidgetSpan(child: Icon(Icons.star)),
      // ...
    ],
  ),
);

常见问题

如何实现文本点击事件？

使用recognizer属性配合TapGestureRecognizer。

TapGestureRecognizer recognizer = TapGestureRecognizer()
  ..onTap = () {
    // 处理点击事件
  };

RichText(
  text: TextSpan(
    text: "可点击文本",
    recognizer: recognizer,
  ),
);

如何在富文本中嵌入图片？

使用WidgetSpan嵌入图片组件。

RichText(
  text: const TextSpan(
    children: [
      WidgetSpan(
        child: Image.network(
          "https://example.com/image.png",
          width: 20,
          height: 20,
        ),
      ),
      TextSpan(text: "图片后面的文本"),
    ],
  ),
);

如何设置WidgetSpan的对齐？

使用alignment属性。

WidgetSpan(
  child: Icon(Icons.star, size: 24),
  alignment: PlaceholderAlignment.middle, // 居中对齐
);

RichText和Text有什么区别？

特性 Text RichText
样式 单一样式 多样式混合
子元素 不支持 支持TextSpan和WidgetSpan
复杂度 简单 复杂
使用场景 普通文本显示 富文本、图文混排

与其他组件的对比

Text vs RichText

// Text组件：单一样式
Text(
  "Hello World",
  style: TextStyle(color: Colors.black),
);

// RichText组件：多样式
RichText(
  text: const TextSpan(
    text: "Hello ",
    style: TextStyle(color: Colors.black),
    children: [
      TextSpan(
        text: "World",
        style: TextStyle(color: Colors.blue),
      ),
    ],
  ),
);

RichText vs Column

// 使用RichText实现图文混排
RichText(
  text: const TextSpan(
    children: [
      WidgetSpan(child: Icon(Icons.star)),
      TextSpan(text: "文本"),
    ],
  ),
);

// 使用Column实现图文混排
Column(
  children: [
    Icon(Icons.star),
    Text("文本"),
  ],
);

两者的区别：

  • RichText：文本和Widget在同一行，适合行内混排
  • Column：文本和Widget在不同行，适合垂直排列

总结

RichText组件是Flutter中实现富文本效果的核心组件，通过TextSpan和WidgetSpan的组合，可以实现各种复杂的文本样式和图文混排效果。以下是一些关键点：

  1. TextSpan：用于定义文本片段，可以嵌套使用
  2. WidgetSpan：用于在文本中嵌入Widget，如图标、图片等
  3. 样式继承：子TextSpan会继承父TextSpan的样式
  4. 手势识别：通过recognizer属性实现文本点击事件
  5. 性能优化：使用const修饰、避免过多嵌套

掌握RichText的用法对于创建复杂的UI界面至关重要，特别是在需要显示多种样式文本或图文混排的场景中。

参考资料：

# harmonyos # flutter # 华为 # 学习 # 鸿蒙
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

安全随行：SecurityKit 构筑鸿蒙7应用隐私防护底座

avatar 人工智能6S服务平台
cover

轻量化端侧智能新可能：鸿蒙7 Agent框架重塑应用交互形态

avatar 人工智能6S服务平台
cover

鸿蒙三方库 | harmony-utils之ImageUtil图片压缩详解

avatar 人工智能6S服务平台