HarmonyOS 鸿蒙Next中富文本加载相关

HarmonyOS 鸿蒙Next中富文本加载相关

  1. 使用richText 和 web组件加载的富文本都偏小，这篇帖子的内容对我并不起效果
    https://developer.huawei.com/consumer/cn/forum/topic/0204182017813972878

  2. 如何设置富文本对应的宽度呢？我希望他可以自适应宽度，并且居中显示。

  3. 富文本默认的背景都是白色的，我希望是透明色的，以便能够露出底图，如何实现呢？

我的使用方式如下：

msg =  '<span style='font-size:13px;color:#002A3C;font-weight:600;font-family:PingFang SC'>'*舒先生,您好<span style='font-size:13px;color:#FF4545;font-weight:600;font-family:PingFang SC;'>'富文本<span style='font-size:15px;font-family:PingFangSC-Regular;'>富文本</span></span>富文本</span>'

// 使用RichText方式
RichText(msg)
  .margin({ top: 40 })
  .height(12)
  .height('auto')        // 改为自适应高度
  .align(Alignment.Center)

// 使用Web组件方式
Web({
  src: '',
  controller: this.webVC
}).onControllerAttached( () => {
  try {
    this.webVC.loadData(
      encodeURIComponent(msg),
      "text/html",
      "UTF-8",
      '',
      ''
    )
  } catch (error) {
  }
})
  .height(12)
  .margin({ top: 40 })

更多关于HarmonyOS 鸿蒙Next中富文本加载相关的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

目前确实存在展示过小的问题，包括 Web 组件和 RichText 组件，希望华为官方能改进，默认情况下能根据像素密度以合理大小来展示内容。

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


如果HTML可以搞定一切，那还要各种Text组件干嘛

const html = `

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{ margin:0; padding:0; background-color: transparent; } body { font-size:16px; line-height: 1.5; padding-left: 15; padding-right: 15; } </style> </head> <body> ${msg} </body> </html> `

可以尝试再包一层，构成完整的html页面，在< style >里面设置你需要的样式。

font-size 依然会 采用我 msg 中设置的大小，外层设置的 body 并不生效。

其次，您知道，如何设置富文本的高度嘛？目前看来他会自动占满剩余的所有部分，

在HarmonyOS Next中，富文本加载可通过RichText组件实现，支持HTML格式文本渲染。使用data属性绑定富文本内容，需确保字符串符合HTML规范。若需加载网络资源，配合onStart和onComplete回调处理异步状态。样式控制通过内联HTML标签或全局CSS类名实现。注意：Next版本禁用动态脚本执行，仅支持静态内容渲染。性能优化建议拆分长文本为分段加载。

关于HarmonyOS Next中富文本加载的问题，以下是解决方案：

  1. 字体大小问题：
  • 对于RichText组件，建议直接在HTML内容中使用rem单位而不是px，例如font-size:1rem
  • 对于Web组件，可以通过注入CSS来统一控制字体大小：
this.webVC.loadDataWithBaseUrl(
  encodeURIComponent(`<style>body{font-size:16px;}</style>${msg}`),
  "text/html",
  "UTF-8",
  "",
  ""
)
  1. 宽度自适应和居中：
  • RichText组件：
RichText(msg)
  .width('100%')
  .textAlign(TextAlign.Center)
  • Web组件：
Web({
  src: '',
  controller: this.webVC
})
.width('100%')
.margin({ left: 0, right: 0 })
  1. 透明背景：
  • RichText组件默认透明背景，确保父组件也没有设置背景色
  • Web组件需要额外设置：
Web({
  // ...
})
.backgroundColor(Color.Transparent)
.onControllerAttached(() => {
  this.webVC.setBackgroundColor(Color.Transparent)
  this.webVC.loadDataWithBaseUrl(
    encodeURIComponent(`<style>body{background-color:transparent;}</style>${msg}`),
    // ...
  )
})

注意：Web组件性能开销较大，推荐优先使用RichText组件实现富文本展示。

回到顶部