一、自适应拉伸
在线性布局下,常用空白填充组件 Blank,在容器主轴方向自动填充空白空间,达到自适应拉伸效果
示例:
实现以下常用ui布局,左侧标题文本,右侧内容文本,中间空白区域
二、自适应缩放
是指子元素随容器尺寸的变化而按照预设的比例(权重)自动调整尺寸,适应各种不同大小的设备。在线性布局中,可以使用以下两种方法实现自适应缩放。
1、使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重
2、使用百分比设置子元素和兄弟元素的宽度
示例:
一个没有设置子元素尺寸的情况
1、使用权重的方式设置子元素尺寸
2、使用百分比的方式设置子元素尺寸
三、自适应延伸
是指在不同尺寸设备下,当页面的内容超出屏幕大小而无法完全显示时,可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景
通常有以下两种实现方式:
1、在List中添加滚动条:
当List子项过多一屏放不下时,可以将每一项子元素放置在不同的组件中,通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态,edgeEffect属性设置拖动到内容最末端的回弹效果。
2、使用Scroll组件:
在线性布局中,开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时,
可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局
标签:滚动条,布局,缩放,Column,元素,适应,线性,ArkUi From: https://www.cnblogs.com/xqxacm/p/18508649