HarmonyOS鸿蒙Next中Web加载富文本如何自适应高度

HarmonyOS鸿蒙Next中Web加载富文本如何自适应高度 有小伙伴用web组件加载富文本吗，我这样加载图文富文本，有时候会图片显示一小段而已，但是web显示的很长，好奇怪的问题，web这时候触摸滑动，那小段图片也会滚动，这是一个问题，还有另一个是如何自适应，内容多高，web显示多高，滚动只交给外出的scroll组件，尝试了设置

WebLayoutMode.FIT_CONTENT

但是并没有用

3 回复

【背景知识】

  • RichText用于解析并显示HTML格式文本，适用于不需要对显示效果进行较多自定义的应用场景，并且仅支持有限的通用属性和事件。只支持通用属性中width，height，size，layoutWeight四个属性。padding，margin，constraintSize属性使用时与通用属性描述不符，暂不支持。不支持通过设置属性与事件，来修改背景颜色、字体颜色、字体大小、动态改变内容等。
  • WebviewController：可以控制Web组件各种行为（包括页面导航、声明周期状态、JavaScript交互等行为）。一个WebviewController对象只能控制一个Web组件，且必须在Web组件和WebviewController绑定后，才能调用WebviewController上的方法（静态方法除外）。

【解决方案】

设置富文本字体大小具体方案如下：

  1. 在富文本前添加head标签；
  2. 将meta中content属性值设置为width=device-width, initial-scale=1，使页面的布局视口自动设置为各个移动设备的理想视口，实现HTML适配移动端设备；
  3. 在onControllerAttached回调中使用loadData加载指定数据。

示例代码如下：

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct RichTextExample {
  @State value: string =
    '<html><body><big><span style="color:#F4333C;font-size:20px;" >RichText用于解析并显示HTML格式文本。</span></big><br>适用于不需要对显示效果进行较多自定义的应用场景，并且仅支持有限的通用属性和事件。</body></html>'
  @State richStrHead: string = '<head><meta name="viewport" content="width=device-width, initial-scale=1"></head>'
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Text('RichText显示模块')
      RichText(this.value)
        .width('100%')
        .height('100')
        .backgroundColor(0XBDDB69)
      Divider().height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 })
      Text('Web显示模块')
      Web({ src: '', controller: this.webviewController })
        .onControllerAttached(() => { // 当Controller成功绑定到Web组件时触发该回调
          this.webviewController.loadData(this.richStrHead + this.value, "text/html", "UTF-8", " ", " ")
        })
        .width('100%')
        .height('300')
        .minFontSize(30)
        .backgroundColor(0XBDDB69)
    }
    .width('100%')
    .height('100%')
    .margin({ top: 30 })
  }
}

使用Web组件大小自适应页面内容布局模式layoutMode(WebLayoutMode.FIT_CONTENT)时，能使Web组件的大小根据页面内容自适应变化。具体可见：Web组件大小自适应页面内容布局

更多关于HarmonyOS鸿蒙Next中Web加载富文本如何自适应高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可通过Web组件加载富文本，使用onPageEnd事件监听页面加载完成，通过runJavaScript执行JS脚本获取内容高度，再动态设置Web组件的height属性实现自适应。示例代码：

webView.onPageEnd(() => {
    webView.runJavaScript('document.body.scrollHeight', (height) => {
        webView.height = height;
    });
});

需在webview组件中启用javaScriptAccess权限。

在HarmonyOS Next中，可以通过以下方式实现Web组件加载富文本的自适应高度：

  1. 使用WebLayoutMode.FIT_CONTENT布局模式，并配合onContentHeightChange监听内容高度变化：
webController.setWebLayoutMode(WebLayoutMode.FIT_CONTENT)
webController.onContentHeightChange((height: number) => {
  // 动态调整Web组件高度
})
  1. 在富文本CSS中加入自适应样式：
img {
  max-width: 100%;
  height: auto;
  display: block;
}
  1. 对于图片显示异常问题，建议：
  • 检查图片URL是否有效
  • 添加图片加载错误处理
  • 确保图片尺寸不会超出容器范围
  1. 禁用Web组件内部滚动：
webAttr.webSettings().setJavaScriptEnabled(true)
// 通过注入CSS隐藏滚动条

这样即可实现内容高度自适应，将滚动交给外部Scroll组件处理。

回到顶部