鸿蒙RelativeContainer中子Text不显示及相关注意_relativecontainer注意事项-CSDN博客

本文链接：https://blog.csdn.net/liuyang103832/article/details/139429868

鸿蒙RelativeContainer中子Text不显示及相关注意

最近学习鸿蒙时使用RelativeContainer，这个控件和Android的ConstraintLayout还是有一定差距的，下面讲一下注意事项。

1.一定要设置ID！一定要设置ID！一定要设置ID！
2.RelativeContainer一定要设置高度，否则子控件可能不显示，或者显示不全。
3.一定要设置锚点
.alignRules({
top: { anchor: ColorConstant.PARENT, align: VerticalAlign.Top }
})

下面看一下案例：

RelativeContainer() {
          Text(`限量${this.homeEntity.limited}份`)
            .width($r('app.float.size_101'))
            .height($r('app.float.size_28'))
            .fontColor(Color.White)
            .backgroundColor(ColorConstant.MAIN_COLOR)
            .borderRadius($r('app.float.size_20'))
            .textAlign(TextAlign.Center)
            .fontSize($r('app.float.size_text_13'))
            .id("numTv")
            .alignRules({
              middle: { anchor: ColorConstant.PARENT, align: HorizontalAlign.Center }
            })

          Image($r('app.media.tip_icon_back'))
            .width($r('app.float.size_19'))
            .height($r('app.float.size_23'))
            .margin({ left: $r('app.float.size_15') })
            .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
            .id("tipIv")
            .alignRules({
              left: { anchor: "numTv", align: HorizontalAlign.End },
              center: { anchor: "numTv", align: VerticalAlign.Center }
            })
            .onClick(() => {
              this.setDateMethod()
            })
        }.width('100%').height($r('app.float.size_40')).margin({ top: $r('app.float.size_15') })

这里原先我RelativeContainer是没有设置高度的，Text显示样式，但是不显示字体，只有设置了高度才能正常显示高度。

4.RelativeContainer内子组件“A”设置magin-top，另一个子组件“B”以“A”为锚点时，样式不符合预期。
解决办法：假如设置了margin-top：20，同时设置magin-bottom：20即可。

案例如下：

 RelativeContainer() {
    

        Image($r('app.media.user_back'))
          .width($r('app.float.size_62'))
          .height($r('app.float.size_62'))
          .id('iv')
          .alignRules({
            top: { anchor: ColorConstant.PARENT, align: VerticalAlign.Top },
            left: { anchor: ColorConstant.PARENT, align: HorizontalAlign.Start }
          })
          .margin({
            top: $r('app.float.size_70'),//原本我只设置了top和left
            left: $r('app.float.size_20'),
            bottom: $r('app.float.size_70'),
            right: $r('app.float.size_20')
          })

        Text("登录")
          .width($r('app.float.size_52'))
          .height($r('app.float.size_20'))
          .backgroundColor($r('app.color.doing_green'))
          .textAlign(TextAlign.Center)
          .fontSize($r('app.float.size_text_8'))
          .fontColor(Color.White)
          .id('loginTv')
          .alignRules({
            top: { anchor: 'iv', align: VerticalAlign.Center },
            middle: { anchor: 'iv', align: HorizontalAlign.Center }
          })
      }.width('100%').height($r('app.float.size_174'))```