HarmonyOS 鸿蒙Next 相对布局元素不显示

HarmonyOS 鸿蒙Next 相对布局元素不显示

import display from ‘@ohos.display’;

@Component export struct bgComponent { @Builder defaultBody(){} header:boolean=true headerBg:string | PixelMap | Resource=‘gradient’ @BuilderParam bodyBuilder: () => void =this.defaultBody; private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

build() { // Image() RelativeContainer(){ // if(this.headerBg === ‘gradient’){ // // // Row().width(300).height(300).backgroundColor(‘rgba(255,255,255,0.05)’).id(‘circle2’) // }else{ // Image(this.headerBg).width(‘100%’).id(‘bg_image’) //} Canvas(this.context).width(‘100%’).height($r(‘app.float.up_bg_height’)).onReady(()=>{ const displayObject = display.getDefaultDisplaySync(); const grad = this.context.createLinearGradient(0, 0, 0, 290) grad.addColorStop(0, ‘#607CFF’) grad.addColorStop(1, ‘#78CBF5’) this.context.fillStyle = grad this.context.fillRect(0, 0, px2vp(displayObject.width)||360 , 290)

  }).id('bg_gradient')
  Circle({width:300,height:300})
    .fill(Color.White)
    .fillOpacity('5%')
    .alignRules({
      center:{anchor:'__container__',align:VerticalAlign.Top},
      middle:{anchor:'__container__',align:HorizontalAlign.Start}
    }).offset({
      x:80,
      y:-50
    })
    .id('circle1')
  Circle({width:300,height:300})
    .fill(Color.White)
    .fillOpacity('5%')
    .alignRules({
      center:{anchor:'__container__',align:VerticalAlign.Center,},
      middle:{anchor:'__container__',align:HorizontalAlign.End}
    }).offset({
      y:-60
    })
    .id('circle2')
  Column(){
    this.bodyBuilder()
  }.backgroundColor(Color.Transparent).width('100%').height('100%')
  .id('page_content')

}.width('100%').height('100%').backgroundColor($r('app.color.bg_color_normal'))

} }

上文所示代码块，将任意某一anchor换成其他子元素，预览无法查看


更多关于HarmonyOS 鸿蒙Next 相对布局元素不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

大概试了下， 好像可以。在具体一点说明就好了

更多关于HarmonyOS 鸿蒙Next 相对布局元素不显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


比如，把当前代码中的circle的anchor换成canvas的id，两个就都不显示了，

终于知道为什么了，relativeContainer实际上不止要设置id，alignRules哪怕是空的也要写一个.alignRules({})。

在HarmonyOS鸿蒙Next中，相对布局元素不显示的问题可能由多种原因导致。首先，检查布局文件中的RelativeLayout是否正确设置，确保所有子元素的属性如layout_alignParentTop、layout_alignParentLeft等正确配置。其次，确认子元素的visibility属性是否设置为visible，避免被错误地设置为invisible或gone。此外，检查是否有其他布局属性或样式覆盖了相对布局的显示效果，如padding、margin等。最后，确保代码中没有逻辑错误导致元素被动态隐藏或移除。通过逐步排查这些可能的原因，可以解决相对布局元素不显示的问题。

回到顶部