目录

之——布局

杂谈

正文

1.布局基础知识

2.Column

3.Row

4.实践

        布局容器组件。

        一个丰富的页面需要很多组件组成，那么，我们如何才能让这些组件有条不紊地在页面上布局呢？这就需要借助容器组件来实现。

        容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助开发者生成精美的页面。容器组件除了放置基础组件外，也可以放置容器组件，通过多层布局的嵌套，可以布局出更丰富的页面。

        线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。

        在布局容器中，默认存在两根轴，分别是主轴和交叉轴，这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。

        不同的组件的主轴方向不一样。

        容器组件是可以使用入参space来设置子组件的间距：

        Column和Row有两个属性， 来设置布局在轴上的对齐：

        子组件在主轴方向上的对齐使用justifyContent属性来设置，其参数类型是FlexAlign。FlexAlign定义了以下几种类型： 

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

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

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

        使用样例见下方Row中的图。

        使用样例：

常用组件与布局（ArkTS） (huawei.com)

相关概念

Text：显示一段文本的组件。

Image：Image为图片组件，常用于在应用中显示图片。Image支持加载string、PixelMap和Resource类型的数据源，支持png、jpg、bmp、svg和gif类型的图片格式。

TextInput：单行文本输入框组件。

Button：按钮组件，可快速创建不同样式的按钮。

LoadingProgress：用于显示加载动效的组件。

Flex：以弹性方式布局子组件的容器组件。

Column：沿垂直方向布局的容器。

Row：沿水平方向布局容器。

List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

Swiper：滑块视图容器，提供子组件滑动轮播显示的能力。

Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。