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

发布于 1周前 作者 caililin 来自 鸿蒙OS

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

回到顶部