11. 图解鸿蒙之布局 - alignRules

287 阅读2分钟

在鸿蒙这个超有意思的布局小天地里,锚点和对齐方式可是两大 "布局法宝",能帮咱们把页面元素安排得妥妥当当。

基本概念先搞懂

  • 锚点 :可以把它想象成小元素的 "定位挂钩" 哦。每个元素就像挂饰,要找个地方挂起来才能稳稳当当待着,这个挂的地方就是锚点啦。它能让元素依据父元素或者兄弟元素来找准自己的位置呢。在水平方向,有三个常见 "挂钩点",也就是 leftmiddleright;垂直方向呢,也有对应的 topcenterbottom。要想精准定位,得给 RelativeContainer 和它旗下的子元素都贴上专属 "名字标签",也就是 ID。父容器默认有个名字叫 __container__,其他子元素就得靠 id 属性来自报家门啦。要是忘了给组件设 id,它虽然能在页面上露面,可没办法被别的元素当作 "定位依靠",相对布局容器给它临时起的名字,程序也不认识,要是不小心搞出元素之间互相依赖、绕成圈的依赖关系,那容器里这些调皮的子组件干脆就不显示咯,要是同方向设好几个顺序错乱的锚点,这个子组件就直接 "隐身",大小变成 0 啦。
  • 对齐方式:这就是元素靠着锚点的 "站队姿势" 啦,是紧紧贴在锚点的上面、中间、下面,还是左边、中间、右边,全由它说了算。

动手设置依赖关系

锚点设置有讲究

  • 以父组件为锚点

在这段代码里呀,row1 和 row2 就像两个乖巧的小朋友,都紧紧抱住父容器 __container__ 这个 "大树" 当锚点。通过 alignRules 定好规则,一个规规矩矩站在左上角,一个利利索索站在右上角,是不是超清晰?

  • 以兄弟元素为锚点

这儿呢,row2 就有点小机灵啦,它不找爸爸(父容器),而是拉着 row1 这个兄弟的手,靠着 row1 的底部和左边对齐,一下子就有了不一样的布局效果。

  • 复杂子组件锚点选择

这段代码看着有点复杂,不过就像搭积木一样好玩。每个子组件都挑了自己心仪的锚点,有的靠着父容器,有的拽着兄弟。但千万记住哦,子组件选锚点的时候别乱套,要是相互依赖得太混乱,整个布局就会出岔子啦。把锚点和对齐方式用好,咱们在鸿蒙里打造页面,就能又稳又漂亮啦。

PS:实际项目中如有出入,请告知博主,博主会第一时间修改得哇~