梅克尔工作室-景绩凡-鸿蒙笔记2

复现页面

1组件介绍

• Column表示沿垂直方向布局的容器。

• Row表示沿水平方向布局的容器。

• 主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。

• 交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。

属性名称	描述
justifyContent	设置子组件在主轴方向上的对齐格式。
alignItems	设置子组件在交叉轴方向上的对齐格式。

1. 主轴方向的对齐（justifyContent）

• Start：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。

• Center：元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。

• End：元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。

• SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。

• SpaceAround：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

• SpaceEvenly：元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。

2. 交叉轴方向的对齐（alignItems）

子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。

Column容器的主轴是垂直方向，交叉轴是水平方向，其参数类型为HorizontalAlign（水平对齐），HorizontalAlign定义了以下几种类型：

• Start：设置子组件在水平方向上按照起始端对齐。

• Center（默认值）：设置子组件在水平方向上居中对齐。

• End：设置子组件在水平方向上按照末端对齐。

Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对齐），VerticalAlign定义了以下几种类型：

• Top：设置子组件在垂直方向上居顶部对齐。

• Center（默认值）：设置子组件在竖直方向上居中对齐。

• Bottom：设置子组件在竖直方向上居底部对齐。

2接口介绍

接下来，我们介绍Column和Row容器的接口。

容器组件	接口
Column	Column(value?:{space?: string | number})
Row	Row(value?:{space?: string | number})

Column和Row容器的接口都有一个可选参数space，表示子组件在主轴方向上的间距。

3 组件使用

@Entry

@Component

export struct LoginPage {

build() {

Column() {

Image($r('app.media.logo'))

...

Text($r('app.string.login_page'))

...

Text($r('app.string.login_more'))

...

TextInput({ placeholder: $r('app.string.account') })

...

TextInput({ placeholder: $r('app.string.password') })

...

Row() {

Text($r(…))

Text($r(…))

}

Button($r('app.string.login'), { type: ButtonType.Capsule, stateEffect: true })

...

Row() {

this.imageButton($r(…))

this.imageButton($r(…))

this.imageButton($r(…))

}

...

}

...

}

}

Row容器的两组组件

Row() {

Text($r(…))

Text($r(…))

}

.justifyContent(FlexAlign.SpaceBetween)

.width('100%')