ArkTS中的Column与Row

基础概念

属性方法名 说明 参数
justifyContent 设置子元素在主轴方向的对齐方式 FlexAlign 枚举
alignItems 设置子元素在交叉轴方向的对齐格式 Row 容器使用 VerticalAlign 枚举 Column 容器使用 HorizontatAlign 枚举

什么是主轴?什么是交叉轴?

  • 主轴:线性布局容器在布局方向上的轴线,子元素默认沿主轴排列。Row 容器主轴为横向,Column 容器主轴为纵向
  • 交叉轴:垂直于主轴方向的轴线。Row 容器交叉轴为纵向,Column 容器交叉轴为横向

如图:您可以直观看到排列方向

在主轴上

通过 FlexAlign 的枚举值改变对齐方式

  • FlexAlign.Start(默认值):子组件在主轴方向起始端对齐, 第一个子组件与父元素边沿对齐,其他元素与前一个元素对齐。
  • FlexAlign.Center:子组件在主轴方向居中对齐。
  • FlexAlign.End:子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐,其他元素与后一个元素对齐。
  • FlexAlign.SpaceBetween:Flex 主轴方向均匀分配弹性元素,相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。
  • FlexAlign.SpaceAround:Flex 主轴方向均匀分配弹性元素,相邻子组件之间距离相同。第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半。
  • FlexAlign.SpaceEvenly:Flex 主轴方向元素等间距布局,相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等。

column 容器

FlexAlign.start

FlexAlign.Center

FlexAlign.End

FlexAlign.SpaceBetween

FlexAlign.SpaceAround

FlexAlign.SpaceEvenly

row 容器

FlexAlign.start

FlexAlign.Center

FlexAlign.End

FlexAlign.SpaceBetween

FlexAlign.SpaceAround

FlexAlign.SpaceEvenly

在交叉轴上

在交叉轴中视容器而使用不同的枚举

column 容器

在 column 容器中使用 HorizontalAlign 枚举来确定在交叉轴的对齐方式

row 容器

在 row 容器中使用 VerticalAlign 枚举来确定在交叉轴的对齐方式

相关推荐
星空真迷人15 小时前
嵌入式鸿蒙并非精简版,核心究竟是什么?
stm32·单片机·嵌入式硬件·物联网·华为·harmonyos·iot
OH_TPC20 小时前
【鸿蒙优选三方库】@ohos/ijkplayer:在鸿蒙上像 B 站一样流畅播视频
华为·音视频·harmonyos·鸿蒙
2501_9197490321 小时前
华为鸿蒙经期记录APP—小羊月经
华为·harmonyos·鸿蒙
黑鲨吃西瓜1 天前
鸿蒙通用模块
harmonyos·鸿蒙
腾科IT教育1 天前
HarmonyOS开发|ArkTS UI颜色API通用规则
ui·华为·harmonyos·harmonyos开发·鸿蒙应用开发工程师
风华圆舞2 天前
HarmonyOS 自定义绘制实战 —— 用 ArkGraphics2D 画一个会卷曲翻动的页面网格
harmonyos·arkts·drawing·drawvertices·翻页卷曲·有限差分法线
风华圆舞2 天前
HarmonyOS 手势与 animator 实战 —— 捏出跟手又有弹性的翻页物理
harmonyos·手势·pixelmap·pangesture·边界回弹·native 句柄
北墨NoLimit2 天前
DevEco Code:在终端里用 AI 写鸿蒙应用
harmonyos
智塑未来2 天前
打开快、切换顺、游戏稳:鸿蒙的日常流畅表现
游戏·华为·harmonyos
智塑未来2 天前
鸿蒙游戏体验手册:四种能力从性能到玩法逐一解锁
游戏·华为·harmonyos