开天辟地 HarmonyOS(鸿蒙) - 组件(文本类): RichText(html 文本)

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 HarmonyOS(鸿蒙) - 组件(文本类): RichText(html 文本)

示例如下:

pages\component\text\RichTextDemo.ets

/*
 * RichText - html 文本(底层用的是 web 组件显示的,资源占用较高,为了避免资源占用推荐使用 RichEditor 组件)
 */

import { TitleBar } from '../../TitleBar'

@Entry
@Component
struct RichTextDemo {

  @State message:string = ""

  html: string =
    // '<meta name="viewport" content="width=device-width">' +
    '<meta name="viewport" content="width=200">' +
    '<h1 style="text-align: center;">h1 标题</h1>' +
    '<div style="font-size: 24px;text-align: center;">我是 div</div>';

  build() {
    Column({ space: 10 }) {
      TitleBar()

      Text(this.message).fontSize(24)

      /*
       * RichText - html 文本(底层用的是 web 组件显示的,资源占用较高)
       *   onStart - 网页加载开始时
       *   onComplete - 网页加载结束时
       */
      RichText(this.html)
        .onStart(() => {
          this.message += "RichText onStart\n"
        })
        .onComplete(() => {
          this.message += "RichText onComplete\n"
        })
        .width(400)
        .height(300)
        .backgroundColor(Color.Orange)
    }
  }
}

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

posted @ 2025-02-05 14:34  webabcd  阅读(121)  评论(0)    收藏  举报