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

相关推荐
hqzing24 分钟前
鸿蒙 PC 底层开发技术详解(七):二进制自签名算法的实现
算法·华为·harmonyos
心中有国也有家2 小时前
鸿蒙 Flutter 本地存储实战:Hive CE 从入门到精讲
人工智能·hive·flutter·华为·harmonyos
绝世番茄2 小时前
鸿蒙原生ArkTS布局方式之Grid+scrollBar滚动条布局深度解析
华为·harmonyos·鸿蒙
绝世番茄3 小时前
鸿蒙原生ArkTS布局方式之Grid固定列数网格深度解析(HarmonyOS NEXT API 24)
华为·harmonyos·鸿蒙
爱吃大芒果4 小时前
AI 智能体工作流设计蓝图:将非结构化情绪记录转化为高精度的模型 Prompt 上下文
人工智能·华为·prompt·harmonyos
●VON4 小时前
HarmonyKit | HarmonyOS Kit 模块化体系与零依赖架构实践
ui·华为·架构·harmonyos·鸿蒙·新特性
在书中成长4 小时前
HarmonyOS 小游戏《对战五子棋》开发第9篇 - GomokuEngine核心引擎设计(四):悔棋功能与历史记录管理
华为·harmonyos
在书中成长5 小时前
HarmonyOS 小游戏《对战五子棋》开发第8篇 - GomokuEngine核心引擎设计(三):五子连珠判定算法
算法·华为·harmonyos
川石课堂软件测试5 小时前
性能测试|Nginx中间件监控与调优
linux·python·nginx·中间件·单元测试·压力测试·harmonyos
最爱老式锅包肉14 小时前
《HarmonyOS技术精讲-Core Speech Kit(基础语音服务)》第2篇:语音识别核心功能——流式与非流式实现
语音识别·xcode·harmonyos