HarmonyOS 加载富文本问题

需要展示一段富文本:“<p><span style=“background-color: rgb(255, 255, 255); font-size: 48px;”>规格:</span></p><p><span style=“background-color: rgb(255, 255, 255); font-size: 48px;”>一盒</span><span style=“color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;”>630ml</span></p><p><span style=“background-color: rgb(255, 255, 255); font-size: 48px;”>三盒</span><span style=“color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;”>1890ml</span></p><p><span style=“background-color: rgb(255, 255, 255); font-size: 48px;”>六盒</span><span style=“color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;”>3780ml</span></p>”

使用的是ReichText 组件,可正常显示,就是高度无法确定,想咨询下这个组件的高度改如何设置,才能是富文本内容全部展示出来。是否有其他的方案展示富文本?

HarmonyOS
2024-12-26 15:06:29
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

RichText组件无法直接设置高度,只能根据其包含的html内容撑开,无法通过设置高度来控制其大小。

RichText文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-richtext-0000001861886725-V5#ZH-CN_TOPIC_0000001861886725__%E6%8E%A5%E5%8F%A3

不适用场景:RichText组件不适用于对HTML字符串的显示效果进行较多自定义的应用场景。例如RichText组件不支持通过设置属性与事件,来修改背景颜色、字体颜色、字体大小、动态改变内容等。在这种情况下,推荐使用Web组件。

请参考demo:

1、在rawfile文件夹新建Index.html。

<!-- Index.html -->
  <!DOCTYPE html>
  <html>
  <body>
  <div style="background-color:#ff0000">
  <p><span style="background-color: rgb(255, 255, 255); font-size: 48px">规格:</span></p>
  <p><span style="background-color: rgb(255, 255, 255); font-size: 48px;">一盒</span><span style="color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;">630ml</span></p>
  <p><span style="background-color: rgb(255, 255, 255); font-size: 48px;\">三盒</span><span style="color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;">1890ml</span></p>
  <p><span style="background-color: rgb(255, 255, 255); font-size: 48px;\">六盒</span><span style="color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;">3780ml</span></p>
  </div>
  <div style="background-color:#00ff00">
  <p><span style="background-color: rgb(255, 255, 255); font-size: 48px">规格:</span></p>
  <p><span style="background-color: rgb(255, 255, 255); font-size: 48px;">一盒</span><span style="color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;">630ml</span></p>
  <p><span style="background-color: rgb(255, 255, 255); font-size: 48px;\">三盒</span><span style="color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;">1890ml</span></p>
  <p><span style="background-color: rgb(255, 255, 255); font-size: 48px;\">六盒</span><span style="color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;">3780ml</span></p>
  </div>

  </body>
  </html>

2、在Index.ets中调用Index.html页面。

// Index.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // 通过$rawfile加载本地资源文件。
      Web({ src: $rawfile("Index.html"), controller: this.controller })
    }
  }
}
分享
微博
QQ
微信
回复
2024-12-26 16:40:18
相关问题
HarmonyOS 文本渲染问题
695浏览 • 1回复 待解决
HarmonyOS Web组件加载文本异常
852浏览 • 1回复 待解决
HarmonyOS web控件加载文本,字太小
986浏览 • 1回复 待解决
HarmonyOS 文本加载页面适配不兼容
404浏览 • 1回复 待解决
HarmonyOS 文本组件问题
884浏览 • 1回复 待解决
HarmonyOS html文本显示问题
1658浏览 • 1回复 待解决
HarmonyOS Text组件文本解析问题
312浏览 • 1回复 待解决
HarmonyOS 文本点击事件
1034浏览 • 1回复 待解决
HarmonyOS 文本超出容器
790浏览 • 1回复 待解决
HarmonyOS TextInput是否支持文本
497浏览 • 1回复 待解决
HarmonyOS 关于实现TextView文本功能
435浏览 • 1回复 待解决
HarmonyOS 如何支持表情和文本
1170浏览 • 2回复 待解决
鸿蒙-文本如何添加图片
7792浏览 • 1回复 待解决
文本扩展点击监听返回url
1260浏览 • 1回复 待解决
HarmonyOS 文本不支持trthtd标签
587浏览 • 1回复 待解决