鸿蒙Row/Column使用

线性布局(Row/Column)核心要点速览

  1. 基本概念
  • 容器:Row(水平排列)、Column(垂直排列)。
  • 主轴:Row为水平方向,Column为垂直方向。
  • 交叉轴:垂直于主轴的方向(Row为垂直方向,Column为水平方向)。
  1. 间距控制
  • space属性:统一设置子元素在排列方向上的等间距。
  1. 主轴对齐(justifyContent)
  • FlexAlign.Start:起始端对齐。
  • FlexAlign.Center:居中对齐。
  • FlexAlign.End:末端对齐。
  • FlexAlign.SpaceBetween:首尾贴边,中间均匀分布。
  • FlexAlign.SpaceAround:首尾间距为中间间距的一半。
  • FlexAlign.SpaceEvenly:所有间距完全相等。
  1. 交叉轴对齐(alignItems/alignSelf)
  • Row:
    • VerticalAlign.Top:顶部对齐。
    • VerticalAlign.Center:垂直居中。
    • VerticalAlign.Bottom:底部对齐。
  • Column:
    • HorizontalAlign.Start:左对齐。
    • HorizontalAlign.Center:水平居中。
    • HorizontalAlign.End:右对齐。
  • alignSelf:单个子元素覆盖容器的alignItems设置。
  1. 自适应能力
  • 拉伸:用Blank组件填充剩余空间。
  • 缩放:
    • layoutWeight:按权重分配主轴空间。
    • 百分比宽高:固定比例适配。
  • 延伸:
    • List+滚动条:适用于列表项过多。
    • Scroll组件:包裹Row/Column实现滚动,支持垂直/水平滚动。
  1. 性能优化建议
  • 避免过深嵌套,减少冗余节点,合理使用布局边界和渲染控制语法。

一句话总结:线性布局通过Row/Column实现水平/垂直排列,结合间距、对齐、自适应策略及滚动机制,高效构建响应式界面,需注意性能优化。


alignItems 与 alignSelf 的区别与联系

维度 alignItems alignSelf
作用范围 统一设置容器内所有子元素在交叉轴上的对齐方式 单独设置某个子元素在交叉轴上的对齐方式
优先级 默认全局生效 更高优先级,覆盖父容器的 alignItems设置
使用位置 设置在容器组件(如 Flex/Grid 容器)上 设置在子元素自身
适用场景 批量统一对齐(如所有子元素垂直居中) 个性化调整(如某个子元素单独底部对齐)
属性值 stretch(默认)、flex-startcenterflex-endbaseline auto(继承)、stretchflex-startcenterflex-endbaseline
布局兼容性 支持 Flexbox 和 Grid 布局 支持 Flexbox 和 Grid 布局(Grid 中更灵活)

示例

ts 复制代码
Column({ alignItems: HorizontalAlign.Center }) {   // 所有子元素默认水平居中
  Text('A')                                      // 水平居中
  Text('B').alignSelf(HorizontalAlign.Start)     // 单独左对齐,覆盖容器的 alignItems
  Text('C')                                      // 水平居中
}

总结:

  • alignItems 是"集体规则",alignSelf 是"个人特权"。
  • 同时存在时,alignSelf 的优先级更高,用于局部覆盖全局设置。
相关推荐
SWUT胖虎3 小时前
AlphabetIndexer组件 与 List 联动总结
list·harmonyos·arkts·鸿蒙
鸿蒙小白龙5 小时前
OpenHarmony轻量级内核LiteOS-M技术详解与应用实践
harmonyos·鸿蒙·鸿蒙系统·open harmony
Damon小智6 小时前
HarmonyOS应用开发-低代码开发登录页面(超详细)
低代码·harmonyos·鸿蒙·登录·arcts·arcui·griditem
爱笑的眼睛118 小时前
深入探讨HarmonyOS中ListItem的滑动操作:从基础实现到高级分布式交互
华为·harmonyos
摘星编程9 小时前
【参赛心得】HarmonyOS创新赛获奖秘籍:如何用Stage模型和声明式UI打造高分作品
ui·华为·harmonyos·鸿蒙开发·stage模型
2501_9197490310 小时前
flutter鸿蒙:实现类似B站或抖音的弹幕功能
flutter·华为·harmonyos
鸿蒙小白龙10 小时前
OpenHarmony后台服务开发指南:ServiceAbility与ServiceExtensionAbility全解析
harmonyos·鸿蒙系统·open harmony
浅蓝色14 小时前
flutter平台判断,这次应该没问题了。支持鸿蒙,插件已发布
flutter·harmonyos
小雨青年1 天前
鸿蒙 HarmonyOS 6|ArkUI(03):状态管理
华为·harmonyos·1024程序员节
猫林老师1 天前
HarmonyOS分布式数据库深度应用
harmonyos