图解鸿蒙之线性布局 - Row 容器内子元素在水平方向上的排列
Row 容器内子元素在水平方向上的排列图
1. 从左对齐(justifyContent (FlexAlign.Start):子元素从 Row 容器的最左边(行首)开始依次排列,第一个元素与容器左边沿对齐,元素之间紧密相连,没有额外的间隔。就像在跑道上,运动员从起跑线开始,一个挨着一个。
2. 中心对齐(justifyContent (FlexAlign.Center):子元素以 Row 容器的水平中心为基准对齐,所有子元素的中心位置在同一条水平线上。如同用一条中心线把元素串起来,它们围绕中心分布。
3. 从右对齐(justifyContent (FlexAlign.End):子元素从 Row 容器的最右边(行尾)开始依次向左排列,最后一个元素与容器右边沿对齐。类似于从终点线开始反向排队。
4\. 均匀间隔对齐(justifyContent (FlexAlign.SpaceBetween):子元素在水平方向均匀分布,相邻元素间隔相同,且第一个元素与容器左边对齐,最后一个元素与容器右边对齐。像在一根横杆上均匀挂着物体,两端都有物体紧贴横杆两端。
5\. 环绕间隔对齐(justifyContent (FlexAlign.SpaceAround):子元素均匀分布,相邻元素间隔相同,且第一个元素到容器左边和最后一个元素到容器右边的距离是相邻元素间隔的一半。元素好像被一种力环绕在容器中间,四周有间隔。
6. 等距间隔对齐(justifyContent (FlexAlign.SpaceEvenly):子元素在水平方向均匀分配,相邻元素间隔、第一个元素与容器左边间隔和最后一个元素与容器右边间隔完全相同。排列非常规整,像用尺子量好后摆放的。
PS:实际项目中如有出入,请告知博主,博主会第一时间修改得哇 \~