HarmonyOS 鸿蒙Next ArkTS Web组件无法占据100%

HarmonyOS 鸿蒙Next ArkTS Web组件无法占据100%

背景

使用ArkTS 用Tabs组件加载页面，第一个页面是加载地图，地图目前没有原生适配方案就用的H5加载，但是在Web加载的时候，Web高度不太对，始终无法进入状态栏那里。

给地图加一个背景色，green

地图页的代码

build() {
    Stack({
      alignContent:Alignment.Top
    }) {
      Web({
        src: $rawfile("map.html"),
        controller: this.webController
      })
        .height(CommonConstants.FULL_PARAM)
        .width(CommonConstants.FULL_PARAM)
        .padding(0)
        .javaScriptAccess(true)
      Text("111")
        .backgroundColor("#59ff0000")
        .fontSize(16)
        .onTouch((e)=>{
          e.stopPropagation
        })
        .height(CommonConstants.HALF_PARAM)
        .width(CommonConstants.FULL_PARAM)
    }
    .backgroundColor(Color.White)
    .height(CommonConstants.FULL_PARAM)
    .width(CommonConstants.FULL_PARAM)
  }

操作1，非全屏

windowClass.setWindowLayoutFullScreen(false)

如图：

<div id="container"></div>

可以看到绿色的实际范围是Web的整个范围，首先地图没有加载完整，少了一部分，在html代码里是这场操作，最后附上map.html代码。并且因为没有全屏的设置导致状态栏那里很丑（ArkTS状态栏无法使用）

操作2 设置全屏

windowClass.setWindowLayoutFullScreen(true)

其他代码未改动，如图：

Web页面还是没有进入状态栏下方，通过红色区域覆盖（Text组件）可知，全屏设置是有效的，Web组件在状态栏区域部分自动给处理了。

有没有大佬知道咋整？

最后附上map.html代码（高德的官方代码）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        background:green;
      }

    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "安全码",
  };
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  AMapLoader.load({
    key: "key", //申请好的Web端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      const map = new AMap.Map("container");
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
</script>
</body>
</html>

更多关于HarmonyOS 鸿蒙Next ArkTS Web组件无法占据100%的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

经实际拖拉web其实占据满了，但是在状态栏那里就会变成灰色不知道咋回事

更多关于HarmonyOS 鸿蒙Next ArkTS Web组件无法占据100%的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


地图多了一抹绿色是css配置问题，加一个就行了。给忘了这个操作

*{
  margin:0;
  padding:0;
}

在HarmonyOS鸿蒙Next中，ArkTS的Web组件无法占据100%的宽度或高度，通常与布局设置或样式定义有关。以下是可能的原因及解决方案：

  1. 布局容器限制：Web组件所在的父容器可能没有设置为占据100%的宽度或高度。确保父容器（如Column、Row或Stack）的宽度和高度设置为100%。

  2. Web组件样式：检查Web组件本身的样式设置，确保其宽度和高度属性被正确设置为100%。例如：

    Web({ src: 'https://example.com' })
    .width('100%')
    .height('100%')

  3. 页面布局限制：如果Web组件位于一个页面中，确保页面布局没有限制其尺寸。例如，页面根容器的宽度和高度也应设置为100%。

  4. 组件嵌套问题：如果Web组件嵌套在多层容器中，确保每一层容器都正确设置了尺寸，避免某一层容器的尺寸限制导致Web组件无法占据100%。

  5. 设备屏幕适配：在某些设备上，屏幕尺寸或分辨率可能影响组件的显示效果。确保布局适配不同设备的屏幕尺寸。

  6. 系统或框架限制：鸿蒙系统的某些版本或框架本身可能存在限制，导致Web组件无法完全占据100%。检查系统更新或框架文档，确认是否存在已知问题。

通过上述步骤，可以排查并解决Web组件无法占据100%的问题。

回到顶部