Flutter框架适配鸿蒙：TextSpan高级用法

TextSpan是RichText的核心，理解TextSpan的特性和使用方式对于创建复杂的富文本至关重要。baseline 基线对齐。middle 中间对齐。bottom 底部对齐。

你大也

945人浏览 · 2026-01-20 23:18:12

你大也 · 2026-01-20 23:18:12 发布

在这里插入图片描述

一、TextSpan深入理解

TextSpan是RichText的核心，理解TextSpan的特性和使用方式对于创建复杂的富文本至关重要。

TextSpan继承机制

样式继承规则

属性	是否继承	说明
fontSize	是	子span未指定则继承
color	是	子span未指定则继承
fontWeight	是	子span未指定则继承
height	是	子span未指定则继承
decoration	否	需要明确指定
letterSpacing	是	子span未指定则继承

二、复杂嵌套结构

多级嵌套示例

RichText(
  text: TextSpan(
    style: TextStyle(fontSize: 16, color: Colors.black87),
    children: [
      TextSpan(text: '第一级文本\n'),
      TextSpan(
        text: '第二级文本，包含：\n',
        style: TextStyle(fontSize: 18, color: Colors.blue),
        children: [
          TextSpan(
            text: '  第三级文本 A\n',
            style: TextStyle(color: Colors.red),
          ),
          TextSpan(
            text: '  第三级文本 B\n',
            style: TextStyle(color: Colors.green),
          ),
        ],
      ),
      TextSpan(text: '回到第一级文本'),
    ],
  ),
)

条件样式渲染

RichText(
  text: TextSpan(
    style: TextStyle(fontSize: 16),
    children: [
      TextSpan(text: '价格：'),
      TextSpan(
        text: '¥999',
        style: TextStyle(
          color: Colors.red,
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(text: '（原价'),
      TextSpan(
        text: '¥1299',
        style: TextStyle(
          decoration: TextDecoration.lineThrough,
          color: Colors.grey,
        ),
      ),
      TextSpan(text: '）'),
    ],
  ),
)

三、TextSpan手势识别

多种手势支持

RichText(
  text: TextSpan(
    style: TextStyle(fontSize: 18),
    children: [
      TextSpan(
        text: '点击这里',
        style: TextStyle(color: Colors.blue),
        recognizer: TapGestureRecognizer()
          ..onTap = () => print('Tap'),
      ),
      TextSpan(text: '  |  '),
      TextSpan(
        text: '长按这里',
        style: TextStyle(color: Colors.green),
        recognizer: LongPressGestureRecognizer()
          ..onLongPress = () => print('LongPress'),
      ),
      TextSpan(text: '  |  '),
      TextSpan(
        text: '双击这里',
        style: TextStyle(color: Colors.orange),
        recognizer: DoubleTapGestureRecognizer()
          ..onDoubleTap = () => print('DoubleTap'),
      ),
    ],
  ),
)

手势冲突处理

TextSpan(
  text: '支持多种手势',
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18,
  ),
  recognizer: TapGestureRecognizer()
    ..onTapDown = (details) {
      print('按下位置：${details.globalPosition}');
    }
    ..onTapUp = (details) {
      print('抬起位置：${details.globalPosition}');
    }
    ..onTap = () {
      print('单击');
    },
)

四、TextSpan与Widget混合

TextSpan内联Widget

Text.rich(
  TextSpan(
    children: [
      TextSpan(text: '用户：'),
      WidgetSpan(
        child: Icon(Icons.person, size: 20, color: Colors.blue),
        alignment: PlaceholderAlignment.middle,
      ),
      TextSpan(text: ' 张三\n'),
      TextSpan(text: '状态：'),
      WidgetSpan(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(4),
          ),
          child: Text(
            '在线',
            style: TextStyle(color: Colors.white, fontSize: 12),
          ),
        ),
      ),
    ],
  ),
)

WidgetSpan对齐方式

Text.rich(
  TextSpan(
    style: TextStyle(fontSize: 20, color: Colors.black87),
    children: [
      TextSpan(text: '顶部'),
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.yellow),
        alignment: PlaceholderAlignment.top,
      ),
      TextSpan(text: '\n'),
      TextSpan(text: '中间'),
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.yellow),
        alignment: PlaceholderAlignment.middle,
      ),
      TextSpan(text: '\n'),
      TextSpan(text: '底部'),
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.yellow),
        alignment: PlaceholderAlignment.bottom,
      ),
    ],
  ),
)

五、动态生成TextSpan

根据数据生成

class HighlightedText extends StatelessWidget {
  final String text;
  final List<String> highlights;

  const HighlightedText({
    super.key,
    required this.text,
    required this.highlights,
  });

  @override
  Widget build(BuildContext context) {
    final spans = _buildSpans();

    return RichText(
      text: TextSpan(
        style: TextStyle(fontSize: 16, color: Colors.black87),
        children: spans,
      ),
    );
  }

  List<InlineSpan> _buildSpans() {
    final spans = <InlineSpan>[];
    int currentIndex = 0;

    for (final highlight in highlights) {
      final index = text.indexOf(highlight, currentIndex);
      if (index == -1) continue;

      // 添加高亮前的普通文本
      if (index > currentIndex) {
        spans.add(TextSpan(text: text.substring(currentIndex, index)));
      }

      // 添加高亮文本
      spans.add(
        TextSpan(
          text: highlight,
          style: TextStyle(
            backgroundColor: Colors.yellow,
            fontWeight: FontWeight.bold,
          ),
        ),
      );

      currentIndex = index + highlight.length;
    }

    // 添加剩余的普通文本
    if (currentIndex < text.length) {
      spans.add(TextSpan(text: text.substring(currentIndex)));
    }

    return spans;
  }
}

六、性能优化

避免不必要的重建

// 不好的做法：每次重建都创建新的recognizer
RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: '点击',
        recognizer: TapGestureRecognizer()..onTap = () => print('click'),
      ),
    ],
  ),
)

// 好的做法：使用const和缓存
final _tapRecognizer = TapGestureRecognizer()..onTap = () => print('click');

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: '点击',
        recognizer: _tapRecognizer,
      ),
    ],
  ),
)

七、完整示例

class TextSpanAdvancedExample extends StatelessWidget {
  const TextSpanAdvancedExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TextSpan高级用法')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildSection('复杂嵌套'),
            _buildNestedExample(),
            SizedBox(height: 24),
            _buildSection('内联Widget'),
            _buildWidgetSpanExample(),
            SizedBox(height: 24),
            _buildSection('高亮文本'),
            _buildHighlightExample(),
          ],
        ),
      ),
    );
  }

  Widget _buildSection(String title) {
    return Text(
      title,
      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
    );
  }

  Widget _buildNestedExample() {
    return RichText(
      text: TextSpan(
        style: TextStyle(fontSize: 16),
        children: [
          TextSpan(text: '商品价格：'),
          TextSpan(
            text: '¥199',
            style: TextStyle(
              color: Colors.red,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(text: ' （'),
          TextSpan(
            text: '原价¥299',
            style: TextStyle(
              decoration: TextDecoration.lineThrough,
              color: Colors.grey,
            ),
          ),
          TextSpan(text: '）'),
        ],
      ),
    );
  }

  Widget _buildWidgetSpanExample() {
    return Text.rich(
      TextSpan(
        style: TextStyle(fontSize: 16),
        children: [
          TextSpan(text: '用户：'),
          WidgetSpan(
            child: Icon(Icons.person, size: 20, color: Colors.blue),
          ),
          TextSpan(text: ' 张三\n'),
          TextSpan(text: '等级：'),
          WidgetSpan(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.orange, Colors.red],
                ),
                borderRadius: BorderRadius.circular(12),
              ),
              child: Text(
                'VIP',
                style: TextStyle(color: Colors.white, fontSize: 12),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildHighlightExample() {
    return HighlightedText(
      text: 'Flutter是一个优秀的跨平台UI框架，Flutter使用Dart语言开发，Flutter性能出众。',
      highlights: ['Flutter', 'Dart'],
    );
  }
}

八、最佳实践

实践	说明	效果
缓存recognizer	避免重复创建	提升性能
合理嵌套	避免过深嵌套	提升可读性
样式复用	提取共用样式	代码简洁
条件渲染	根据需求动态生成	灵活高效

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git