随着万物互联时代的到来，华为提出了“一次开发多端部署、可分可合自由流转、统一生态原生智能”三大应用与服务开发理念。为了降低开发门槛，协助开发者更好地应对多设备、多入口、服务可分可合等特性，华为基于JS/TS语言体系，构建了全新的声明式开发语言ArkTS。今天主要分享arkTS 行与列用法，如果有所帮助，大家点点关注支持一下，也可以联系我一起学习进步!

Row 用法

在 ArkTS 中，Row是一种布局组件，用于水平排列子组件。

一、基本用法

以下是一个简单的使用Row的示例：

@Entry
@Component
struct RowExample {
  build() {
    Row() {
      Text('Item 1').fontSize(16)
      Text('Item 2').fontSize(16)
      Text('Item 3').fontSize(16)
    }.width('100%').height('100%')
  }
}

在这个例子中，创建了一个Row组件，里面包含了三个Text文本组件，它们会从左到右依次排列。

二、属性介绍

• width和height：可以设置Row的宽度和高度。

• alignment：用于设置子组件在水平方向上的对齐方式，可选值有Start、Center、End等。

• spacing：设置子组件之间的间距。

三、应用场景

构建工具栏：可以将多个工具按钮水平排列在Row中，形成一个工具栏。

表单中的一行输入项：比如在一个表单中，将多个输入框和标签水平排列在Row中，使表单布局更加整齐。

导航栏布局：如果要创建一个水平导航栏，可以将导航项放在Row中进行布局。

Column 用法

在 ArkTS 中，Column是一种布局组件，用于垂直排列子组件。

一、基本用法

以下是一个简单的使用Column的示例：​​​​​​​

@Entry
@Component
struct ColumnExample {
  build() {
    Column() {
      Text('Item 1').fontSize(16)
      Text('Item 2').fontSize(16)
      Text('Item 3').fontSize(16)
    }.width('100%').height('100%')
  }
}

在这个例子中，创建了一个Column组件，里面包含了三个Text文本组件，它们会从上到下依次排列。

二、属性介绍

• width和height：可以设置Column的宽度和高度。

• alignment：用于设置子组件在垂直方向上的对齐方式，可选值有Start、Center、End等。

• spacing：设置子组件之间的间距。

三、应用场景

• 构建列表：当需要展示一列数据时，比如列表项，可以使用Column来垂直排列每个列表项。

• 表单布局：可以将表单的各个输入项和标签垂直排列在Column中，使表单更加清晰易读。

• 垂直导航栏：如果要创建一个垂直的导航栏，可以将导航项放在Column中进行布局。