HarmonyOS鸿蒙Next中Web组件设置WebLayoutMode.FIT_CONTENT自适应网页布局实例

HarmonyOS鸿蒙Next中Web组件设置WebLayoutMode.FIT_CONTENT自适应网页布局实例 一、配置route_map.json,增加下面内容

{
      "name": "WebCommponetPage",
      "pageSourceFile": "src/main/ets/pages/WebCommponetPage.ets",
      "buildFunction": "WebCommponetPageBuilder",
      "data": {
        "description": "this is WebCommponetPage"
      }
    }

二、在pages目录新建一个WebCommponetPage.ets文件,文件内容如下 :

import { webview } from '@kit.ArkWeb';

/**
 * Author：bolou
 * Creat time：2026/2/12 14:32
 * Describe：Web组件设置WebLayoutMode.FIT_CONTENT自适应网页布局实例
 */
@Builder
export function WebCommponetPageBuilder() {
  WebCommponetPage();
}


@Entry
@Component
struct WebCommponetPage {
  @State isShow: boolean = false;
  webviewController: webview.WebviewController = new webview.WebviewController();
  pathStack: NavPathStack = new NavPathStack();
  build() {
    NavDestination() {
      Column() {
        Text('Web组件设置WebLayoutMode.FIT_CONTENT自适应网页布局实例')
          .fontSize(16)
        Web({ src: $rawfile('index.html'), controller: this.webviewController })
         .onPageEnd(() => {
            this.isShow = true
            console.info('reader onPageEnd')
          })
          .width('100%')
          .height(this.isShow ? '100%' : '10%')
          .visibility(this.isShow ? Visibility.Visible : Visibility.Hidden)
          .layoutMode(this.isShow ? WebLayoutMode.FIT_CONTENT : WebLayoutMode.NONE)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
      .padding(16)
    }
    .hideTitleBar(true)
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

上面的核心是:layoutMode(this.isShow ? WebLayoutMode.FIT_CONTENT : WebLayoutMode.NONE),是它负责自适应网页布局的.

三.在 Index.ets文件中随便找个元素,加入点击功能即可

  Text("点我进web自适用布局 ")
    .onClick(() => {
        this.pathStack.pushPathByName('WebCommponetPage', null);
     })

好了,就这么简单.