HarmonyOS 鸿蒙Next中Text组件实现加载Html格式文本

HarmonyOS 鸿蒙Next中Text组件实现加载Html格式文本

通过对html标签的解析，配合Span完成简单Html格式文本的加载,解决RichText不能控制行数、字体大小等问题。

1.HTML格式文本解析工具类

  • 独立模块：将HTML解析逻辑封装在工具类中
  • 实体解码：支持<, >, &等HTML实体转义
  • 标签支持：
    • 文本样式：<b>, <i>,<u>
    • 容器标签：<p>, <span>, <div>
    • 字体标签：<font>
  • 属性支持：
    • 内联样式：style=“color:red; font-size:16px;”
    • 标签属性：<font color=“blue” size=“20”>
  • 容错处理：
    • 处理未闭合标签
    • 忽略不支持的标签
    • 处理无效属性值

2. 富文本渲染

  • Text+Span组合：使用Text组件包裹多个Span组件
  • 样式继承：支持标签嵌套和样式叠加
  • 行数控制：
    • 最多显示两行
    • 超出部分显示省略号
    • 可展开查看全文

3. 用户交互

  • 展开/收起：切换显示完整内容或截断显示
  • 动态修改：更换不同HTML内容演示
  • 查看原始HTML：通过TextPicker查看原始HTML代码
  • 状态指示：显示当前展开状态和片段数量

4. 界面设计

  • 现代化UI：简洁清晰的卡片式设计
  • 色彩系统：使用Material Design色彩方案
  • 响应式布局：适应不同屏幕尺寸
  • 视觉反馈：按钮状态变化提供操作反馈

实现原理

1. HTML解析流程

  • 解码HTML实体：将<等转义字符转换为实际字符
  • 遍历HTML字符串：逐个字符处理
  • 提取标签：识别和结构
  • 解析属性：提取标签内的属性和样式
  • 管理样式堆栈：使用栈结构维护当前样式状态
  • 生成文本片段：为每个文本段创建带样式的片段

2. 样式处理

  • 样式堆栈：使用LIFO结构管理嵌套标签样式
  • 样式合并：将堆栈中的样式合并到当前文本
  • 默认值处理：为缺失的样式属性提供默认值
  • 容错机制：忽略无效值并使用安全默认值

3. 富文本渲染

  • Text容器：作为富文本的根容器
  • Span组件：每个文本片段对应一个Span
  • 样式应用：为每个Span设置独立样式
  • 行数控制：使用maxLines限制显示行数
  • 省略号处理：textOverflow设置为Ellipsis

使用示例

// 1. 导入工具类
import { HtmlParser } from './HtmlParser'
// 2. 解析HTML内容
const html = '&lt;p&gt;Hello &lt;b&gt;World&lt;/b&gt;&lt;/p&gt;'
const fragments = HtmlParser.parse(html)
// 3. 渲染富文本
Text() {
  ForEach(fragments, (fragment: TextFragment) => {
    Span(fragment.text)
      .fontColor(fragment.color)
      .fontSize(fragment.fontSize)
      .fontWeight(fragment.fontWeight)
      .fontStyle(fragment.fontStyle)
      .decoration({
        type: fragment.underline ?
          TextDecorationType.Underline : TextDecorationType.None
      })
  })
}
.maxLines(2)
.textOverflow({overflow: TextOverflow.Ellipsis})

注意事项

性能优化

  • 避免在渲染过程中解析HTML
  • 对于长文本，建议在后台线程解析
  • 解析结果可缓存以提高性能

安全考虑

  • 仅支持安全的文本样式标签
  • 不支持脚本执行或外部资源加载
  • 过滤潜在的危险标签和属性

样式限制

  • 不支持所有CSS属性
  • 字体大小只支持数值类型
  • 不支持相对单位(em, rem)

兼容性

  • 支持API 9+
  • 在真机测试以获得最佳效果
  • 部分样式在预览器中可能显示不正确 此方案提供了完整的HTML解析和富文本渲染解决方案，支持转义字符处理，满足最多两行显示和超出省略的需求，同时保持了代码的清晰和可维护性。

更多关于HarmonyOS 鸿蒙Next中Text组件实现加载Html格式文本的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

amrk，学习了

更多关于HarmonyOS 鸿蒙Next中Text组件实现加载Html格式文本的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


学习了，这个真不错

在HarmonyOS Next中，Text组件不支持直接加载HTML格式文本。需要使用Web组件来渲染HTML内容。示例代码：

import webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController()

  build() {
    Column() {
      Web({
        src: "<html><body><h1>HTML内容</h1></body></html>",
        controller: this.controller
      })
    }
  }
}

Web组件支持完整的HTML/CSS/JavaScript渲染能力，可设置高度、宽度等属性控制显示区域。

在HarmonyOS Next中通过Text+Span实现HTML文本渲染的方案很专业。核心思路是将HTML解析为文本片段数组，每个片段携带独立样式属性，然后通过Span组件渲染。这种方式相比RichText确实更灵活，能精确控制行数、字体等样式。

关键点：

  1. HTML解析器采用栈结构管理嵌套标签样式，支持常用标签和属性
  2. 通过Text的maxLines和textOverflow控制行数和省略号
  3. 样式继承机制确保嵌套标签效果正确
  4. 性能方面建议后台线程解析和缓存结果

代码示例展示了完整的实现流程，包括HTML解码、标签解析、样式合并等关键步骤。对于需要精确控制文本样式和布局的场景，这个方案是很好的选择。

注意真机测试时部分样式可能需要调整，特别是字体大小和颜色在不同设备上的表现。

回到顶部