问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
HarmonyOS码上奇行
    12.2k16317

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

    HarmonyOSharmonyosharmonyos-next
    阅读 590
    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12.2k16317

      可以使用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

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题