HarmonyOS开发实战：容器和组件的使用规范指南

最新推荐文章于 2025-07-13 10:15:00 发布

原创

最新推荐文章于 2025-07-13 10:15:00 发布 · 1.3k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #前端 #鸿蒙 #程序员 #鸿蒙开发 #android

Column与Row

由之前的介绍可知，我们可以通过Column和Row容器来对页面进行以一个简单的布局，划分不同的功能分区，以搭建一个完整的页面，接下来我将介绍它更多的属性，使其在使用中更好的对页面进行排布划分。

首先如图

我们可以看到，Column和Row都有一个可选参数“space”，space的类型可以是string或number类型，space的作用是调节其在主轴上子组件之间的距离（Column和Row的主轴分别为纵向和横向），举个例子：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}

该代码显示效果如下：

但在加入Column和Row的space参数后

Column({spaec:30}){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row({spaec:20}){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}

该效果就呈现为：

比较后不难发现，在纵向和横向上，各个组件之间的距离发生的变化

这个便是space参数的用法。

接下来，还要介绍这个两个容器的重要属性“justifyContent”以及“alignItems”

其中，justifyContent的数据类型为FlexAlign,它的具体类型有以下几个：

接下来，我为大家提供前三个代码示例：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
  .justifyContent(FlexAlign.Start)//首端对齐
  .width('100%')
}

效果如图：

同理：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
  .justifyContent(FlexAlign.End)//末端对齐
  .width('100%')
}

效果如图：