在鸿蒙原生开发中RelativeContainer布局问题？

Question

在鸿蒙原生开发中RelativeContainer布局中两个子组件，其中一个子组件需要相对另一个垂直方向上居中，设置了 center: { anchor: “xxx”， align: VerticalAlign.Center } 方式，但是失效？

• 来自陈新老师直播间

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

你可以做如下代码验证:

@Entry 
@Component 
export struct TextComponent { 
 
  build() { 
    Row() { 
      RelativeContainer() { 
        Image($r('app.media.startIcon')) 
          .width(50) 
          .id('view_1') 
          .backgroundColor(Color.Red) 
          .alignRules({ 
            center: { anchor: '__container__'， align: VerticalAlign.Center }， 
            left: { anchor: '__container__'， align: HorizontalAlign.Start } 
          }) 
        Column() { 
          Text('十三太保') 
        } 
        .width(80) 
        .height(20) 
        .id('view_2') 
        .backgroundColor(Color.Green) 
        .alignRules({ 
          center: { anchor: 'view_1'， align: VerticalAlign.Center }， 
          left: { anchor: 'view_1'， align: HorizontalAlign.End } 
        }) 
      } 
      .margin({left: 40}) 
      .backgroundColor(Color.Pink) 
      .width(300) 
      .height(300) 
    } 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。