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 枚举来确定在交叉轴的对齐方式

相关推荐
梦想不只是梦与想10 小时前
鸿蒙 测试工具:DevEco Testing(一)
测试工具·harmonyos·testing
大锅盖112 小时前
Web 工单要调用相机,第一步不是打开取景框,而是建立能力门禁
前端·数码相机·harmonyos
贾伟康16 小时前
【华夏二十四节气|07】HarmonyOS 6.0.2(22) ArkTS 节气搜索实战:多字段匹配与四态闭环
移动开发·harmonyos·arkts·arkui·本地搜索
大龄秃头程序员17 小时前
Flutter 项目鸿蒙适配实战:从环境搭建到多环境打包全指南
harmonyos
贾伟康18 小时前
【万能转换器|18】HarmonyOS ArkTS 权限与隐私实战:让 module.json5、功能说明和拒绝路径一致
移动开发·harmonyos·arkts·权限管理·隐私合规
贾伟康19 小时前
【万能转换器|19】HarmonyOS ArkTS 回归测试实战:覆盖启动、空数据、异常输入和重复点击
软件测试·移动开发·harmonyos·arkts·回归测试
UnicornIT20 小时前
【HarmonyOS】时间管理类APP:做成“自适应“
ui·华为·harmonyos·鸿蒙
less_1213820 小时前
HarmonyOS WPS Open SDK:不落地、水印与功能开关的合规打开策略
华为·harmonyos·wps
贾伟康21 小时前
【万能转换器|20】HarmonyOS ArkTS AppGallery 发布复查实战:核对包名、版本、设备、素材和离线声明
移动开发·harmonyos·arkts·appgallery·应用发布
OH_TPC1 天前
HarmonyOS APP开发---“滤镜大师“图像处理App,需要用到这个库
java·图像处理·华为·harmonyos·鸿蒙