学习笔记（八）：ArkUi-线性布局 (Row/Column)自适应拉伸、缩放、延伸

一、自适应拉伸

在线性布局下，常用空白填充组件 Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果

示例：

实现以下常用ui布局，左侧标题文本，右侧内容文本，中间空白区域

 

 

二、自适应缩放

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

1、使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重

2、使用百分比设置子元素和兄弟元素的宽度

示例：

一个没有设置子元素尺寸的情况

 1、使用权重的方式设置子元素尺寸

2、使用百分比的方式设置子元素尺寸

 

三、自适应延伸

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

通常有以下两种实现方式:

1、在List中添加滚动条：

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

2、使用Scroll组件：

在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，

可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局