HarmonyOS 类似Html.fromHtml将含有html标签的字符串转换成对应格式的文字显示在界面上

想要实现Html.fromHtml将含有html标签的字符串转换成对应格式的文字显示在界面，而不是像RichText一样直接展示Web页面

HarmonyOS

superinsect

2天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

可以使用web组件实现，请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5

import web_webview from '@ohos.web.webview';
@Entry
@Component
struct RichTextExample {
  @State data: string = '<h1 style="text-align: center;">h1标题</h1>' +
    '<h1 style="text-align: center;"><i>h1斜体</i></h1>' +
    '<h1 style="text-align: center;"><u>h1下划线</u></h1>' +
    '<h2 style="text-align: center;">h2标题</h2>' +
    '<h3 style="text-align: center;">h3标题</h3>' +Android
    '<p style="text-align: center;">p常规</p><hr/>' +
    '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0 auto;">' +
    '<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">字体大小35px,行高45px</p>' +
    '<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;">' +
    '<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>';
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column(){
      Web({ src: '', controller: this.controller })
        .onControllerAttached(() => {
          this.controller.loadData(`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<style>
html,body{padding:0px;margin:0px;} p{padding:0px;margin:0px;} div{padding:0px;margin:0px;} img{max-width: 100%; width:auto; height:auto!important;} div{font-size:16px}
</style>
</head>
<body>${this.data}</body>
</html>`, "text/html", "UTF-8")
        })
    }
  }
}

高度自适应需设置web组件属性.layoutMode(WebLayoutMode.FIT_CONTENT)

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#layoutmode11

2天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 类似Html.fromHtml将含有html标签的字符串转换成对应格式的文字显示在界面上

订阅鸿蒙技术特刊，精选内容抢先看