《HarmonyOS应用开发基础》 课件知识点2-3-1 Row与Column组件的使用.pptx

Row与Column组件的使用

010203容器组件概述Column和Row组件介绍线性布局的权重设置

容器组件概述容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局。容器组件除了放置基础组件外，也可以放置容器组件，通过多层布局的嵌套，可以布局出更丰富的页面。ArkTS为我们提供了丰富的容器组件来布局页面，例如使用Column和Row容器组件实现如下效果。

Column和Row组件介绍线性布局容器概念Column和Row组件是ArkTS提供用来实现线性布局的容器组件。线性布局表示按照垂直方向或者水平方向排列子组件的容器。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。

Column和Row组件介绍主轴与交叉轴的概念在线性布局容器中，存在两根轴，分别是主轴和交叉轴，这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。

Column和Row组件介绍交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。

Column和Row组件介绍主轴与交叉轴的对齐格式Column和Row容器默认都在主轴和交叉轴上居中显示子组件。同时，他们也提供属性justifyContent和alignItems用来设置子组件在主轴和交叉轴的对齐格式。主轴方向的对齐格式（justifyContent）子组件在主轴方向上的对齐使用justifyContent属性来设置，其参数类型是FlexAlign。FlexAlign定义了以下几种类型：StartCenterEndSpaceBetweenSpaceAroundSpaceEvenly

Column和Row组件介绍Column在主轴上的对齐格式：Row在主轴上的对齐格式：

Column和Row组件介绍交叉轴方向的对齐（alignItems）子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。Column容器的主轴是垂直方向，交叉轴是水平方向，其参数类型为HorizontalAlign（水平对齐），HorizontalAlign定义了以下几种类型：Start：设置子组件在水平方向上按照起始端对齐。Center（默认值）：设置子组件在水平方向上居中对齐。End：设置子组件在水平方向上按照末端对齐。

Column和Row组件介绍Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对齐），VerticalAlign定义了以下几种类型：Top：设置子组件在垂直方向上居顶部对齐。Center（默认值）：设置子组件在竖直方向上居中对齐。Bottom：设置子组件在竖直方向上居底部对齐。

线性布局的权重设置权重属性表示一行或一列中的尺寸按照权重比进行分配，仅适用于线性布局组件下的子组件，如果同时设置了某一个方向上的尺寸和权重，此时子组件设置的尺寸不起作用。