HarmonyOS Web组件高度设置问题,Web组件内容被遮挡

Web组件内容显示被遮挡,见图片所示:

HarmonyOS Web组件高度设置问题,Web组件内容被遮挡-鸿蒙开发者社区

​页面要求 Web 组件填满屏幕剩余的空间。

尝试使用 Column 组件 flex设置的形式实现,代码如下:

.flexGrow(1)

.flexShrink(0)

尝试结果:

1.正常组件 Row 可以响应 flexGrow flexShrink 自适应占满父组件剩余空间。

2.Web组件无法 自适应占满父组件剩余空间。

综上 Web组件默认高度为 770vp,Web组件设置高度如何设置填满父组件剩余空间,不产生遮挡?​

HarmonyOS
2024-11-07 11:12:38
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

以下代码web可以自适应父组件剩余空间,设置的父组件高度是600,当然设置为100%也是可以的。

@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  webController: webview.WebviewController = new webview.WebviewController(); 
  build() { 
    Column() { 
      Text(this.message) 
        .fontSize(50) 
        .fontWeight(FontWeight.Bold) 
 
      Column() { 
        Row() 
          .backgroundColor(Color.Yellow) 
          .width('100%') 
          .height(100) 
 
        Web({ src: $rawfile('index.html'), controller: this.webController }) 
          .flexGrow(1) 
          .flexShrink(0) 
          .width('100%') 
      } 
      .backgroundColor(Color.Green) 
      .width('100%') 
      .height(600) 
 
    } 
    .height('100%') 
    .width('100%') 
 
  } 
}
分享
微博
QQ
微信
回复
2024-11-07 17:15:36
相关问题
HarmonyOS Web组件高度问题
313浏览 • 1回复 待解决
HarmonyOS Web组件内容缩放问题
392浏览 • 1回复 待解决
HarmonyOS web组件自适应高度问题
1023浏览 • 1回复 待解决
HarmonyOS web高度自适应内容高度
76浏览 • 1回复 待解决
HarmonyOS web组件内容适配折叠屏
282浏览 • 1回复 待解决
Web组件如何实现高度自适应?
1055浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
759浏览 • 1回复 待解决
HarmonyOS web组件加载pdf问题
644浏览 • 1回复 待解决
Web组件domStorageAccess属性设置
2355浏览 • 1回复 待解决
web组件registerJavaScriptProxy的问题
1793浏览 • 0回复 待解决
HarmonyOS Web组件开发问题咨询
301浏览 • 1回复 待解决
HarmonyOS Web组件头部参数问题
218浏览 • 1回复 待解决
Web组件获取高度不一样
2291浏览 • 1回复 待解决
web组件未加载出url内容
421浏览 • 1回复 待解决
web组件如何设置请求头
366浏览 • 1回复 待解决