HarmonyOS 鸿蒙Next 如何在List列表中加载html字段？

HarmonyOS 鸿蒙Next 如何在List列表中加载html字段？

在List列表需要加载html的字段参数，如：“<span style=‘color:#2d64b3;’>@陈宁 </span>可以问吧”
 
采用RichText组件官方不推荐，切不能修改字体大小颜色等属性。

使用RichEditor组件，addTextSpan方式，html格式样式不生效。

使用Web 组件， this.controller.loadData("<span style=‘color:#2d64b3;’>@陈宁 </span>可以问吧", “text/html”, “UTF-8”, “”, “”)，这种方式不显示内容，使用<html><body>标签包裹一下也不行。把span标签去掉可以显示。

且Web 组件高度不能自适应。



请问一下老师，有什么好的方式加载html内容？


更多关于HarmonyOS 鸿蒙Next 如何在List列表中加载html字段？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

1.加载片段时可以用包裹，然后用this.controller.loadData(this.updataContent, “text/html”, “UTF-8”, " ", " ");方式加载 2.自适应高度问题，可以js加入计算的方法，传递给原生

可以参考下面demo

@State dataList: Array<string> = new Array()
@State pageHeight: number = 0.01;

controller: webview.WebviewController = new webview.WebviewController();
updataContent: string = '<html><body><div><span style=\'color:#2d64b3;font-size:14px;\'>@张三 </span>可以问吧<p>111</p><p>111</p><p>111</p><p>111</p><p>111</p></div></body>' +
  '<script type=\'text/javascript\'>function watchWindowSize(){ var h = document.body.clientHeight; return h; }</script></html>'

aboutToAppear(): void {
  for (let i = 0; i< 10; i++) {
  this.dataList.push(i+'')
}
}

List({ space: 20, initialIndex: 0 }) {
  ForEach(this.dataList, (item: number) => {
    if (item == 0) {
      ListItem() {
        Web({ src: '', controller: this.controller })
          .layoutMode(WebLayoutMode.FIT_CONTENT)
          .onControllerAttached(() => {
            this.controller.loadData(this.updataContent, "text/html", "UTF-8", " ", " ");
          })
          .javaScriptAccess(true)
          .onPageEnd(e => {
            this.controller.runJavaScript(
              'watchWindowSize()',
              (error, result) => {
                let webResult = Number(result)
                this.pageHeight = webResult
                console.info('webResult=' + webResult);
              }
            )
          })
          .nestedScroll({
            scrollForward: NestedScrollMode.SELF_FIRST,
            scrollBackward: NestedScrollMode.SELF_FIRST,
          })
          .width('100%')
          .height(this.pageHeight)
      }
    } else {
      ListItem() {
        Text('' + item)
          .width('100%').height(60).fontSize(16)
          .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF).margin({top: 5}).borderRadius(16)
      }
    }

  }, (item: string) => item)
}
.listDirection(Axis.Vertical) // 排列方向
.scrollBar(BarState.Off)
.friction(0.6)
.edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
.width('90%')

更多关于HarmonyOS 鸿蒙Next 如何在List列表中加载html字段？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，若想在List列表中加载HTML字段，你可以利用Text组件结合Html.fromHtml方法（假设鸿蒙系统提供了类似Android的HTML解析功能，请注意，鸿蒙API可能与Android有所不同，以下回答基于假设的相似性进行说明）。以下是一个简化的步骤描述：

  1. 准备HTML内容：首先，确保你的HTML内容是以字符串形式存在。

  2. 解析HTML：鸿蒙系统中若提供类似Html.fromHtml的方法，你可以使用该方法将HTML字符串解析为Spanned对象，该对象可以被Text组件直接显示。例如：

    String htmlContent = "<p>This is a <b>bold</b> paragraph.</p>";
Spanned spanned = Html.fromHtml(htmlContent, Html.FROM_HTML_MODE_LEGACY);

    注意：此处代码仅为示意，实际鸿蒙API可能有所不同。

  3. 在List项中显示：将解析后的Spanned对象设置给List项中的Text组件。

  4. 更新List：确保List组件刷新以显示更新后的内容。

由于鸿蒙系统的具体API可能与上述描述有所出入，建议查阅鸿蒙官方文档获取准确信息。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部