【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设置


文章目录

    • [【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐------RelativeContainer的AlignRules设置](#【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设置)
        • [RelativeContainer 和 AlignRules 的关系](#RelativeContainer 和 AlignRules 的关系)
        • [AlignRules 语法详解](#AlignRules 语法详解)

【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐------RelativeContainer的AlignRules设置

RelativeContainer 和 AlignRules 的关系

RelativeContainer 是一种布局容器,允许您根据容器内部的其他元素或容器本身 来定义组件的相对位置 。使用 RelativeContainer 可以更灵活地安排组件之间的关系 ,而不需要明确指定组件的绝对位置。

AlignRules是为了对RelativeContainer这一弹性布局容器中的子容器设置对齐规则。

AlignRules 语法详解
typescript 复制代码
RelativeContainer(){
  Row(){
    Text('未知用户')
      .margin({right:10})
    Text('待完善')
      .border({
        width:1,
        color:'#3274f6',
        style:BorderStyle.Solid
      })
  }
  .alignRules({
    top:{
      anchor:'__container__',
      align:VerticalAlign.Top
    },
    middle:{
      anchor:'__container__',
      align:HorizontalAlign.Center
    }
  })
}
  • 代码示例中的top,middlealignRules中的属性,分别表示了该组件的上下左右边界以及水平和竖直的中心轴,具体的表示规则如下:
  • anchor指的是锚点,即子容器相对于哪个容器进行布局,__container__表示容器本身,如果说需要相对于其他的子容器进行布局,也可以在其他的子容器上设置id,并且设置该id的锚点。
typescript 复制代码
// 第一个组件:按钮,位于容器顶部居中
Button('按钮1')
  .id('button1') // 设置组件的 id 为 'button1'
  .alignRules({
    top: {
      anchor: '__container__', // 相对于容器顶部
      align: VerticalAlign.TOP
    },
    center: {
      anchor: '__container__', // 相对于容器水平居中
      align: HorizontalAlign.CENTER
    }
  })

// 第二个组件:文本,位于按钮的下方并水平居中
Text('这是相对按钮1的文本')
  .alignRules({
    top: {
      anchor: 'button1', // 相对于 'button1' 的下方
      align: VerticalAlign.BOTTOM
    },
    center: {
      anchor: '__container__', // 水平居中对齐
      align: HorizontalAlign.CENTER
    }
  })
  • 水平方向和竖直方向的排布规则:

    总结:该代码的含义是,首先通过anchor做相对定位,然后让组件的top/center/bottom/start/middle/end 去与 容器在水平或竖直方向对应的轴 对齐

因此,如果想让组件在容器的顶部居中,对应的alignRules应为:

typescript 复制代码
.alignRules({
      top:{
         anchor:'__container__',
         align:VerticalAlign.Top
       },
       middle:{
         anchor:'__container__',
         align:HorizontalAlign.Center
       }
     })
相关推荐
枫叶丹418 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
HarmonyOS小助手3 天前
在鸿蒙中造梦的开发者,一边回答,一边前行
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
HarmonyOS小助手5 天前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
HarmonyOS小助手18 天前
京东正式开源Taro on HarmonyOS C-API 版本,为鸿蒙应用跨端开发提供高性能框架
harmonyos·鸿蒙·harmonyos next·harmonyos 5.0·鸿蒙5·鸿蒙生态
枫叶丹419 天前
【HarmonyOS Next之旅】DevEco Studio使用指南(三十六) -> 配置构建(三)
华为·harmonyos·deveco studio·harmonyos next
爱笑的眼睛1124 天前
HarmonyOS 图片轮播组件开发指南
华为·面试·harmonyos·harmonyos next
victordeng25 天前
HarmonyOS Next快速入门:为什么学习HarmonyOS NEXT?
harmonyos·harmonyos next
爱笑的眼睛111 个月前
HarmonyOS 组件复用 指南
华为·harmonyos·harmonyos next
爱笑的眼睛111 个月前
HarmonyOS 组件复用面试宝典 [特殊字符]
华为·面试·harmonyos·harmonyos next
枫叶丹41 个月前
【HarmonyOS Next之旅】DevEco Studio使用指南(三十三) -> 构建任务
华为·harmonyos·deveco studio·harmonyos next