HarmonyOS alignRules属性？

Question

RelativeContainer(){
  Text("七日年化")
    .fontSize(13)
    .alignRules({
      left: {
        anchor: "qrnh_color_view",
        align: HorizontalAlign.End
      }
    })
    .margin({
      left: 7
    })
    .fontColor("#797c8f")
    .id("tv_qrnh")

  Text("")
    .width(9)
    .height(4)
    .backgroundColor("#ff5736")
    .alignRules({
      top: {
        anchor: "tv_qrnh",
        align: VerticalAlign.Bottom
      }
    })
    .id("qrnh_color_view")

  // Text("1.20%")
  //   .fontColor("#ff5736")
  //   .fontSize(15)
  //   .alignRules({
  //     left: {
  //       anchor: 'qrnh_color_view',
  //       align: HorizontalAlign.Start
  //     }
  //   })
  //   .id('tv_qrnh_value')
}
.id("left")
.width("200")
.height("100")

我去掉qrnh\_color\_view的alignRules属性就显示,加上就不显示 是为啥

Answer 1

可以使用容器组件把text包裹起来，就可以正常展示了

@Entry
@Component
struct Index {

  build() {
    RelativeContainer() {

      Row() {
        Text("七日年化")
          .fontSize(13)
          .margin({
            left: 7
          })
          .fontColor("#797c8f")
          .id("tv_qrnh")
      }.alignRules({
        left: {
          anchor: "qrnh_color_view",
          align: HorizontalAlign.End
        }
      })

      Row() {
        Text("2")
          .width(9)
          .height(4)
          .backgroundColor("#ff5736")
          .id("qrnh_color_view")
      }.alignRules({
        top: {
          anchor: "tv_qrnh",
          align: VerticalAlign.Bottom
        }
      })


      // Text("1.20%")
      // .fontColor("#ff5736")
      // .fontSize(15)
      // .alignRules({
      // left: {
      // anchor: 'qrnh_color_view',
      // align: HorizontalAlign.Start
      // }
      // })
      // .id('tv_qrnh_value')

    }
    .id("left")
    .width("200")
    .height("100")
  }
}