7.图解鸿蒙之布局-ItemAlign

206 阅读2分钟

在鸿蒙弹性布局的奇妙天地里,交叉轴对齐方式可是让页面布局精致又规整的关键秘诀。不仅容器能设置交叉轴对齐,子元素也能,而且子元素设置的对齐方式优先级更高哦,就像它有 "插队" 特权。

容器组件设置交叉轴对齐

Flex 组件的 alignItems 参数,就像是一位 "交叉轴指挥官",专门指挥子元素在交叉轴上排兵布阵。

  1. ItemAlign.Auto:跟着默认配置走

ItemAlign.Auto 特别省心,它就说:"咱不折腾,用 Flex 容器里原本的默认配置就行。" 就像下面这段代码展示的:

子元素们按照容器既定的默认规则,在交叉轴上各就各位,不搞特殊。

  1. ItemAlign.Start:站到交叉轴首部去

选了 ItemAlign.Start,子元素们立马变得乖巧,都往交叉轴方向的开头处扎堆。不管各自高矮胖瘦,都先奔着首部对齐,代码里一目了然:

三个 Text 元素,虽然高度不同,但在交叉轴上,都整整齐齐靠着开头站好了。

  1. ItemAlign.Center:在交叉轴中间集合

要是把 alignItems 设成 ItemAlign.Center ,子元素们就有了 "舞台中央" 意识,一股脑儿往交叉轴的正中间凑,要成为最亮眼的存在:

它们不再偏居一侧,而是在交叉轴中间排排站,让布局看着更平衡。

  1. ItemAlign.End:朝着交叉轴底部对齐

这个模式下,子元素们目标明确,都往交叉轴的底部跑,要在那儿站定脚跟。最后呈现出来,就是规规矩矩在交叉轴末尾排列:

  1. ItemAlign.Stretch:拉伸填充交叉轴

ItemAlign.Stretch 可有劲啦,它让子元素在交叉轴方向上使劲儿拉伸,要是没提前设置好尺寸,直接就拉到和容器一样大。看代码:

这里的 Text 元素没设高度,就会自动拉伸,填满交叉轴方向的空间。

  1. ItemAlign.Baseline:按文本基线对齐

最后这个 ItemAlign.Baseline 很特别,它聚焦在文本上,让子元素在交叉轴方向按照文本基线来对齐,让文字排版更规整、美观:

有了这么丰富多样的交叉轴对齐方式,咱们在鸿蒙里打造弹性布局时,就能把页面细节雕琢得更加完美啦。

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