HarmonyOS 鸿蒙Next 如何在List列表中加载html字段?
HarmonyOS 鸿蒙Next 如何在List列表中加载html字段?
采用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.自适应高度问题,可以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有所不同,以下回答基于假设的相似性进行说明)。以下是一个简化的步骤描述:
-
准备HTML内容:首先,确保你的HTML内容是以字符串形式存在。
-
解析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可能有所不同。
-
在List项中显示:将解析后的Spanned对象设置给List项中的
Text
组件。 -
更新List:确保List组件刷新以显示更新后的内容。
由于鸿蒙系统的具体API可能与上述描述有所出入,建议查阅鸿蒙官方文档获取准确信息。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html