【鸿蒙学习】鸿蒙HarmonyOS4.0入门 - 1

一、线性布局（LinearLayout）

1.概述

线性布局是鸿蒙开发中的常用布局，通过线性容器Row和Column构建。Column容器内子元素按垂直方向排列，Row容器内子元素按水平方向排列。根据不同的排列方向，可选择使用Row或Column容器创建线性布局。

// Column容器
Column(){

}

// Row容器
Row(){

}

2.对齐方式

（1）布局子元素在交叉轴上的对齐方式

Column容器内子元素在水平方向上的排列

Row容器内子元素在垂直方向上的排列

（2）布局子元素在主轴上的排列方式

Column容器内子元素在垂直方向上的排列

Row容器内子元素在水平方向上的排列

3.自适应拉伸

在线性布局下，常用空白填充组件Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。Row和Column作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果。

4.自适应播放

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。在线性布局中，可以使用以下两种方法实现自适应缩放。

（1）父容器尺寸确定时，使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。

（2）父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使他们在任意尺寸的设备下保持固定的自适应占比。

5.自适应延伸

自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式。

（1）在List中添加滚动条：当List子项过多一屏放不下时，可以将每一项子元素放置在不同的组件中，通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到内容最末端的回弹效果。

（2）使用Scroll组件：在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。

二、弹性布局（Flex）

1.概念

弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称‘轴线’）上。子元素尺寸总和大于Flex容器尺寸时，子元素尺寸会自动挤压。

2.布局方向

在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。

3.布局换行

弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

4.主轴对齐方向

通过justifyContent参数设置子元素在主轴方向的对齐方式。

5.交叉轴对齐方式

容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。

（1）容器组件设置交叉轴对齐

可以通过Flex组件的alignItems参数设置子元素在交叉轴的对齐方式。

·ItemAlign.Auto：使用Flex容器中默认配置。

·ItemAlign.Start：交叉轴方向首部对齐。

·ItemAlign.Center：交叉轴方向居中对齐。

·ItemAlign.End：交叉轴方向底部对齐。

·ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

·ItemAlign. Baseline：交叉轴方向文本基线对齐。

（2）子元素设置交叉轴对齐

子元素的alignSelf属性也可以设置子元素在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。Flex容器中alignItems设置交叉轴子元素的对齐方式为居中，子元素自身设置了alignSelf属性的情况，覆盖父组件的alignItems值，表现为alignSelf的定义。

（3）内容对齐

可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效。

·FlexAlign.Start：子元素各行与交叉轴起点对齐。

·FlexAlign.Center：子元素各行在交叉轴方向居中对齐。

·FlexAlign.End：子元素各行与交叉轴终点对齐。

·FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。

·FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。

·FlexAlign.SpaceEvenly: 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。