零基础学鸿蒙开发--第四篇--常⽤布局

4.1. 布局基础

4.1.1.1. 概述

布局是指对⻚⾯组件进⾏排列和定位的过程，其⽬的是有效地组织和展示⻚⾯内容，会涉及到组件的⼤⼩、位置以 及它们之间的相互关系等等。

4.1.1.2. 盒⼦模型

在鸿蒙应⽤中，⻚⾯上的每个组件都可以看做是⼀个矩形的盒⼦，这个盒⼦包含了 内容区域 （ content ）、 边框 （border ）、 内边距 （ padding ）和 外边距 （ margin ），各部分内容如下图所示

其中margin、padding和border均可使⽤同名的属性⽅法进⾏设置，各⽅法定义如下

• margin

margin(value: { top?:Length, right?:Length, bottom?:Length, left?:Length } | Length )

说明： 1. Length = string | number | Resource 2. 当参数类型为 Length 时，四个⽅向的边距同时⽣效

• padding

padding(value: { top?:Length, right?:Length, bottom?:Length, left?:Length } | Length )

• ​border

  border(value: {width?:Length, color?:ResourceColor, radius?:Length,
  style?:BorderStyle })

各属性含义如下

• width

width 属性表示边框宽度

• color

color 属性表示边框颜⾊

• radius

radius 属性表示边框圆⻆半径

• style

style 属性表示边框样式，可通过 BorderStyle 这⼀枚举类型进⾏设置，可选的枚举值有

名称	描述	效果
BorderStyle.Dotted	显示为⼀系列圆点
BorderStyle.Dashed	显示为⼀系列短的⽅形虚线
BorderStyle.Solid	显示为⼀条实线

4.2. 线性布局（Column/Row）

4.2.1. 概述

线性布局（ LinearLayout ）是开发中最常⽤的布局，可通过容器组件 Column 和 Row 构建，其⼦组件会在垂直或者⽔平⽅向上进⾏线性排列，具体效果如下图所示

说明

Column 和 Row 容器均有两个轴线，分别是 主轴 和 交叉轴

主轴 ：线性布局容器在布局⽅向上的轴线， **Row** 容器 主轴为横向 ， **Column** 容器 主轴为 纵向 。

交叉轴 ：垂直于主轴⽅向的轴线。 **Row** 容器 交叉轴为纵向 ， **Column** 容器 交叉轴为横 向。

4.2.2. 参数

Column和Row容器的参数类型为 {space?: string | number} ，开发者可通过 space 属性调整⼦元素在主轴⽅向上的间距，效果如下

4.2.3. 常⽤属性

4.2.3.1. ⼦元素沿主轴⽅向的排列⽅式

⼦元素沿主轴⽅向的排列⽅式可以通过 justifyContent() ⽅法进⾏设置，其参数类型为枚举类型 FlexAlign ， 可选的枚举值有

4.2.3.2. ⼦元素沿交叉轴⽅向的对⻬⽅式

⼦元素沿交叉轴⽅向的对⻬⽅式可以通过 alignItems() ⽅法进⾏设置，其参数类型，对于 Column 容器来讲 是 HorizontalAlign ，对于 Row 容器来讲是 VerticalAlign ，两者都是枚举类型，可选择枚举值也都相同，具 体内容如下

4.2.4.1. Blank 组件的使⽤

Blank 可作为 Column 和 Row 容器的⼦组件，该组件不显示任何内容，并且会始终充满容器主轴⽅向上的剩余空间，效果如下：