HarmonyOS Web组件高度问题

Web 组件设置高度100%，父组件是 Column，上面还有个 title 组件。

Column(){ 
  Text().height(200) 
  Web().height('100%') 
} 
.padding({bottom:100})

这样设置的 padding 属性不起作用是为什么，或者说 web 直接被顶下去了，设置了web 的高度没效果，除非设置 web 固定高度例如 height(600)。

HarmonyOS

FengTianYa

2024-11-07 10:59:27

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

Column组件本身如果不设置宽高，他的宽高是由子组件的的内容撑开的，Web组件如果不设置宽高默认都是100%，所以Column的内外边距在某些时候会失效，如果实现你想要的效果建议使用固定高度。建议使用Flex组件，Flex组件在本身不设置高度的时候，会根据内外边距布局，不会被子视图的内容撑开。以下是两种方式的代码验证，请参考。

Colunm方式:

Column(){ 
  Text().height(200) 
  Web({src:'https://www.huawei.com/',controller:this.controller}).onPageEnd((res)=>{ 
    console.log("onPageEnd",JSON.stringify(res)) 
  }).backgroundColor(Color.Red).onErrorReceive((err)=>{ 
    console.log("onErrorReceive",JSON.stringify(err)) 
  }).id("web").onClick((ele)=>{ 
    let web = getInspectorByKey("web") 
    console.log(web,"web") 
  }) 
}.backgroundColor(Color.Green).width("100%").id("Column") 
.onClick((ele)=>{ 
  let col = getInspectorByKey("Column") 
  console.log(col) 
})

Flex方式：

Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Stretch }){ 
  Text().height(200) 
  Web({src:'https://xxx.huawei.com/hi',controller:this.controller}).onPageEnd((res)=>{ 
    console.log("onPageEnd",JSON.stringify(res)) 
  }).backgroundColor(Color.Red).onErrorReceive((err)=>{ 
    console.log("onErrorReceive",JSON.stringify(err)) 
  }).id("web") 
    .onClick((ele) => { 
      let web = getInspectorByKey("web") 
      console.log(web, "web") 
    }) 
}.backgroundColor(Color.Yellow).width("100%").margin({bottom:100}).id("flex").onClick((ele)=>{ 
  let web = getInspectorByKey("flex") 
  console.log(web, "flex") 
})

正确的Flex布局如下：

Flex({  wrap: FlexWrap.Wrap }) { 
  Column() { 
    Text('测试2').fontColor(Color.White).height(50).backgroundColor(Color.Blue) 
    Text('测试2').fontColor(Color.White).height(50).backgroundColor(Color.Orange) 
  } 
  .width('100%') 
  .backgroundColor(Color.Red) 
  Scroll() { 
    Column() { 
      ForEach(this.list, (data: number) => { 
        Blank().height(10) 
        Text(data + ' item').width('100%').height(100).backgroundColor(Color.Gray) 
      }) 
    } 
  } 
}

关于Flex布局请参考该链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flex-V5

2024-11-07 15:12:59

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Web组件高度问题

订阅鸿蒙技术特刊，精选内容抢先看