19.图解鸿蒙之布局-row-FlexAlign

141 阅读2分钟

在前端布局设计里,巧妙设置 Row 容器内子元素在水平方向的排列方式,能让页面布局瞬间灵动起来。利用 justifyContent 属性,我们能轻松驾驭这些排列效果,打造出风格各异的页面。

justifyContent (FlexAlign.Start):水平方向首端对齐

image.png

这段代码中,几个 Column 子元素在水平方向上,第一个元素紧紧挨着行首 “站队”,后续元素依次跟前一个元素无缝对接,排列得紧凑又整齐,从左到右给人一种秩序井然的开篇感,让页面布局起始部分清爽利落。

justifyContent (FlexAlign.Center):水平方向中心对齐

image.png

这里,子元素们像是找到了水平方向的 “平衡点”,第一个元素与行首的距离和最后一个元素与行尾的距离被精准调配成一致,它们整齐排列在 Row 容器的正中间,让整个布局呈现出对称美,视觉重心稳定,给人和谐、舒适的视觉体验。

justifyContent (FlexAlign.End):水平方向尾部对齐

image.png 此情形下,子元素们集体向右看齐,最后一个元素稳稳站在行尾,其余元素依次跟后一个元素对齐,给布局在右侧画上利落的句号,让页面右半边规整有序,彰显收尾的干脆。

justifyContent (FlexAlign.SpaceBetween):水平方向均匀分配元素

image.png

在这种排列模式下,相邻子元素之间保持着相等的间距,第一个元素紧贴行首,最后一个元素靠住行尾,空间分配均匀合理,元素分布疏密得当,让页面看起来简洁明快,毫无拥挤或松散之感。

justifyContent (FlexAlign.SpaceAround):水平方向均匀分配元素

\

image.png

此时,相邻元素间距依旧统一,不过第一个元素到行首、最后一个元素到行尾的距离是相邻元素间距的一半,整体布局在均匀之中多了几分柔和过渡,视觉上更显灵动活泼。

justifyContent (FlexAlign.SpaceEvenly):水平方向绝对均匀分配元素

image.png

这一排列方式将均匀做到了极致,相邻元素间距、第一个元素与行首间距、最后一个元素到行尾间距全部一模一样,营造出极度规整精致的布局效果,给人严谨专业的视觉印象。