12.图解鸿蒙之线性布局-Column容器内子元素在垂直方向上的排列

137 阅读2分钟

图解鸿蒙之线性布局-Column容器内子元素在垂直方向上的排列

在布局容器内,可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布,也可以从主轴结束位置开始排布,或者均匀分割主轴的空间。

Column容器内子元素在垂直方向上的排列图

    1顶部对齐(justifyContent(FlexAlign.Start)) 说明:子元素从容器顶部开始依次排列,第一个元素与容器顶部边缘对齐,元素之间紧密相连,没有额外间距,适合按顺序展示内容。

2. 中心对齐(justifyContent(FlexAlign.Center)) 说明:子元素以容器的垂直中心为基准对齐,所有子元素中心在同一条垂直线上,呈现出平衡、对称的视觉效果,用于突出元素的整体展示效果。

3. 底部对齐(justifyContent(FlexAlign.End)) 说明:子元素从容器底部开始排列,最后一个元素与容器底部边缘对齐,其余元素依次向上对齐,可引导用户关注底部信息。

4.均匀间隔对齐(justifyContent(FlexAlign.SpaceBetween)) 说明:子元素在垂直方向均匀分布,相邻元素间距相同,且第一个元素与容器顶部、最后一个元素与容器底部对齐,使布局规整。

5. 环绕间隔对齐(justifyContent(FlexAlign.SpaceAround)) 说明:子元素均匀分布,相邻元素间距相同,且第一个元素到容器顶部和最后一个元素到容器底部的距离是相邻元素间距的一半,有较好的空间感。

6.等距间隔对齐(justifyContent(FlexAlign.SpaceEvenly)) 说明:子元素在垂直方向上均匀分配,相邻元素间距、第一个元素与容器顶部间距和最后一个元素与容器底部间距完全相同,布局非常规整。

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