HarmonyOS鸿蒙应用开发之Row & Colum组件的使用

文章目录

- - [Row 组件](#Row 组件)
  - [Column 组件](#Column 组件)
  - - 注意事项
  - 其他属性
  - - [Row 和 Column 组件的通用属性](#Row 和 Column 组件的通用属性)
    - [Row 组件特有的属性和用法](#Row 组件特有的属性和用法)
    - [Column 组件特有的属性和用法](#Column 组件特有的属性和用法)
    - 示例代码

在HarmonyOS（鸿蒙系统）中， Row 和 Column 组件是ArkTS（Ark TypeScript）语言用于构建用户界面的基础布局容器。它们分别用于实现水平方向（ Row）和垂直方向（ Column）的布局。以下是这两个组件的一些主要属性及用法介绍：

Row 组件

基本用法：

Row 组件允许你将子组件水平排列。你可以通过调整不同的属性来控制子组件的布局方式。

主要属性：

space：设置子组件之间的间距。可以是一个数值（表示固定的间距）或字符串（在某些情况下表示基于屏幕密度的间距）。
justifyContent ：控制子组件在主轴（水平方向）上的对齐方式。常用的值包括FlexAlign.Start（首端对齐）、FlexAlign.Center（居中对齐）、FlexAlign.End（尾端对齐）、FlexAlign.SpaceBetween（两端对齐，元素之间等间距）、FlexAlign.SpaceAround（元素周围等间距）、FlexAlign.SpaceEvenly（元素之间及两端等间距）。
alignItems ：控制子组件在交叉轴（垂直方向）上的对齐方式。由于Row的主轴是水平方向，交叉轴是垂直方向，因此此属性主要用于控制子组件的垂直对齐方式。不过，对于Row组件，通常更关注水平方向的对齐，因此alignItems的使用相对较少。
crossAxisAlignment ：与alignItems类似，但在某些布局框架中可能以不同名称出现，用于控制子组件在交叉轴上的对齐方式。

示例代码：

typescript 复制代码

@Entry
@Component
struct RowExample {
  build() {
    Row({ space: 20, justifyContent: FlexAlign.SpaceBetween }) {
      Text('Item 1').fontSize(16)
      Text('Item 2').fontSize(16)
      Text('Item 3').fontSize(16)
    }
  }
}

Column 组件

基本用法：

Column 组件允许你将子组件垂直排列。与Row类似，你可以通过调整不同的属性来控制子组件的布局方式。

主要属性：

space：设置子组件之间的间距。
justifyContent ：控制子组件在主轴（垂直方向）上的对齐方式。与Row组件相同，但在这里它控制的是垂直方向的对齐。
alignItems ：对于Column组件，它控制子组件在交叉轴（水平方向）上的对齐方式。常用的值包括HorizontalAlign.Start（左对齐）、HorizontalAlign.Center（居中对齐）、HorizontalAlign.End（右对齐）。
crossAxisAlignment：同样用于控制子组件在交叉轴上的对齐方式，但可能因布局框架而异。

示例代码：

typescript 复制代码

@Entry
@Component
struct ColumnExample {
  build() {
    Column({ space: 10, justifyContent: FlexAlign.Center, alignItems: HorizontalAlign.Center }) {
      Text('Item 1').fontSize(16)
      Text('Item 2').fontSize(16)
      Text('Item 3').fontSize(16)
    }
  }
}

注意事项

justifyContent 和 alignItems（或crossAxisAlignment）是两个非常重要的属性，它们分别控制子组件在主轴和交叉轴上的对齐方式。
space 属性用于设置子组件之间的间距，使得布局更加美观和易于阅读。
在实际应用中，你可能需要根据具体需求调整这些属性的值，以达到理想的布局效果。

其他属性

在HarmonyOS的ArkTS语言中，Row和Column组件除了上述提到的space、justifyContent、alignItems（或crossAxisAlignment）等常用属性外，还有一些其他属性和用法，这些属性和用法可以进一步丰富和细化布局效果。以下是一些额外的属性和用法介绍：

Row 和 Column 组件的通用属性

width 和 height：
- 这两个属性分别用于设置组件的宽度和高度。它们可以是具体的数值（如像素值），也可以是百分比（相对于父容器的宽度或高度）。
padding 和 margin：
- padding属性用于设置组件内部子元素与组件边界之间的空间。
- margin属性用于设置组件外部与其他元素之间的空间。
- 这两个属性可以是单一的数值，也可以是包含上、右、下、左四个方向的数组或对象。
backgroundColor：
- 用于设置组件的背景颜色。可以是一个颜色代码（如十六进制颜色码）或颜色对象。
border：
- 用于设置组件的边框样式，包括边框的宽度、颜色等。在某些情况下，可能需要通过decoration属性来设置更复杂的边框样式。

Row 组件特有的属性和用法

mainAxisSize：
- 控制主轴（水平方向）的尺寸。MainAxisSize.min表示主轴尺寸由子组件尺寸决定，MainAxisSize.max表示主轴尺寸扩展到容器尺寸。
mainAxisAlignment 和 crossAxisAlignment：
- 这两个属性分别用于控制子组件在主轴和交叉轴上的对齐方式。虽然Row组件的主要关注点是水平方向的对齐，但crossAxisAlignment属性仍然可以用于控制子组件在垂直方向上的对齐方式。

Column 组件特有的属性和用法

对于Column组件，其属性和用法与Row组件类似，但主轴方向是垂直的，因此一些属性的效果会有所不同。例如，mainAxisSize、mainAxisAlignment和crossAxisAlignment在Column组件中将影响子组件在垂直和水平方向上的布局。

示例代码

以下是一个结合了多个属性的Row和Column组件示例：

typescript 复制代码

@Entry
@Component
struct LayoutExample {
  build() {
    Column({ space: 10, justifyContent: FlexAlign.Center, alignItems: HorizontalAlign.Center, width: '100%', height: '100%' }) {
      Row({ space: 20, mainAxisAlignment: MainAxisAlignment.SpaceEvenly, crossAxisAlignment: CrossAxisAlignment.Center }) {
        Text('Item 1').fontSize(16).padding({ all: 5 }).backgroundColor(Color.LightGray)
        Text('Item 2').fontSize(16).padding({ all: 5 }).backgroundColor(Color.LightBlue)
        Text('Item 3').fontSize(16).padding({ all: 5 }).backgroundColor(Color.LightGreen)
      }
      .width('80%')
      .height(100)
      .backgroundColor(Color.White)
      .border({ width: 1, color: Color.Black })

      // 可以继续添加其他Row或Column组件
    }
  }
}

请注意，上述示例中的CrossAxisAlignment.Center在Row组件中实际上并不是必需的，因为Row的交叉轴是垂直方向，而alignItems属性（在ArkTS中可能以不同名称出现，如crossAxisAlignment或直接在Row组件上作为alignItems）已经用于控制水平方向上的对齐方式。然而，为了展示属性的通用性，我仍然将其包含在内。在实际应用中，应根据具体需求选择合适的属性和值。

以上信息基于HarmonyOS的ArkTS语言以及相关的布局组件文档。需要注意的是，随着HarmonyOS的不断更新和发展，某些属性或用法可能会发生变化。因此，建议在实际开发过程中参考最新的官方文档或资源。