鸿蒙应用开发的容器组件——Column和Row

在鸿蒙（HarmonyOS）开发中，Column 和 Row 是两种非常基础的布局组件，它们分别用于在垂直方向和水平方向上排列子组件。这些组件使得开发者能够轻松地构建出结构清晰、布局合理的用户界面。下面将详细介绍这两个组件的属性以及如何使用它们。

Column和Row 是常用的容器组件之一。Column 是垂直方向上布局的容器组件，Row 是水平方向上布局的容器组件。

Column和Row 的构造函数都有 space 参数，表示元素之间的间距。

属性alignItems和justifyContent，用来设置子组件的对齐格式。

对于Column 组件来说alignItems 属性是用来设置子组件在水平方向上的对齐格式，默认是HorizontalAlign.Center。justifyContent 设置子组件在垂直方向上的对齐格式，默认是FlexAlign.Start

@Entry
@Component
struct Index {

  build() {
    Column() {
      TabBar()
    }
    .width(Const.FULL_WIDTH)
    .backgroundColor($r('app.color.listColor'))
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

Row 组件

Row 组件与Column类似，但它是用于在水平方向上排列子组件。其属性与Column类似，但使用场景不同。

使用示例

@Entry
@Component
struct Index {

  build() {
    Row() {
      TabBar()
    }
    .width(Const.FULL_WIDTH)
    .backgroundColor($r('app.color.listColor'))
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Center)
  }
}

注意事项

• 在使用Column和Row时，可以通过调整spacing等属性来控制子组件的布局效果。
• 鸿蒙支持多种布局方式，包括Flex布局（Column和Row就是基于Flex布局的）、Grid布局、Stack布局等，开发者可以根据实际需求选择合适的布局方式。
• 鸿蒙的组件和属性可能会随着版本的更新而发生变化，建议查阅最新的官方文档以获取最准确的信息。