18.图解鸿蒙之布局-column-FlexAlign

105 阅读2分钟

在布局设计领域,精准掌控子元素在主轴上的排列方式,是打造出美观、有序页面布局的关键一环。借助 justifyContent 属性,我们能够灵活地安排子元素在容器主轴(对于 Column 容器而言,主轴就是垂直方向)上的站位,从而实现多样的布局效果。

justifyContent (FlexAlign.Start):元素在垂直方向首端对齐

image.png 在这段代码里,几个 Column 子元素像是训练有素的士兵,在垂直方向上,第一个元素果断地与行首对齐,后续元素也依次跟前一个元素紧紧对齐,整个排列从顶部起始位置就显得整齐划一,给人干脆利落的视觉感受,让布局开篇就条理清晰。

justifyContent (FlexAlign.Center):元素在垂直方向中心对齐

image.png

此时,子元素们仿佛找到了 “舞台中央”,第一个元素与行首的距离和最后一个元素与行尾的距离被精心调配成相同长度,它们稳稳地处于垂直方向的正中间位置,让整个布局呈现出对称、平衡的美感,视觉焦点更为集中,看起来和谐又舒适。

justifyContent (FlexAlign.End):元素在垂直方向尾部对齐

image.png

这组代码里,子元素们朝着垂直方向的尾部 “进军”,最后一个元素精准地与行尾对齐,其余元素依次跟后一个元素对齐,为整个布局带来利落收尾的感觉,让页面下方显得规整有序。

justifyContent (FlexAlign.SpaceBetween):垂直方向均匀分配元素

image.png

这里,相邻元素之间像是被等距隔开,第一个元素稳稳站在行首,最后一个元素坚守在行尾,空间分配均匀合理,使得布局疏密得当,视觉上清爽简洁,元素之间既不拥挤也不松散。

justifyContent (FlexAlign.SpaceAround):垂直方向均匀分配元素

image.png

image.png 在这种排列方式下,相邻元素之间距离依旧相等,不过第一个元素到行首、最后一个元素到行尾的距离是相邻元素间距的一半,整体布局在均匀之中多了几分柔和的过渡,让页面看起来更灵动。

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

image.png

此模式将均匀做到了极致,相邻元素之间的距离、第一个元素与行首间距、最后一个元素到行尾间距,全部一模一样,打造出极致规整的布局效果,给人一种精致、严谨的视觉印象。