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

相关推荐
左手厨刀右手茼蒿5 小时前
Flutter 三方库 all_lint_rules_community 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、严谨、基于全量社区 Lint 规则的工业级静态代码质量与安全审计引擎
flutter·harmonyos·鸿蒙·openharmony·all_lint_rules_community
雷帝木木5 小时前
Flutter for OpenHarmony:Flutter 三方库 cbor 构建 IoT 设备的极致压缩防窃协议(基于标准二进制 JSON 表达格式)
网络·物联网·flutter·http·json·harmonyos·鸿蒙
王码码20355 小时前
Flutter 三方库 servicestack 的鸿蒙化适配指南 - 实现企业级 Message-based 架构集成、支持强类型 JSON 序列化与跨端服务调用同步
flutter·harmonyos·鸿蒙·openharmony·message-based
里欧跑得慢5 小时前
Flutter 三方库 jsonata_dart 的鸿蒙化适配指南 - 实现高性能的 JSON 数据查询与转换、支持 JSONata 表达式引擎与端侧复杂数据清洗
flutter·harmonyos·鸿蒙·openharmony·jsonata_dart
chenyingjian7 小时前
鸿蒙|性能优化-内存及其他优化
harmonyos
总有刁民想爱朕ha7 小时前
haihong Os 鸿蒙开源版开发一个pc版软件应用(1)
华为·开源·harmonyos
弓.长.11 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库:react-native-masked-view — 遮罩视图组件
react native·react.js·harmonyos
大雷神11 小时前
HarmonyOS APP<玩转React>开源教程十四:进度管理服务
前端·react.js·开源·harmonyos
Swift社区11 小时前
鸿蒙 App 的数据流设计
华为·harmonyos
国医中兴11 小时前
Flutter 三方库 superclass 的鸿蒙化适配指南 - 支持原生高性能类构造、属性代理与深层元数据解析实战
flutter·harmonyos·鸿蒙·openharmony