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

一、自适应拉伸

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

示例:

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

 

 

二、自适应缩放

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

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

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

示例:

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

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

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

 

三、自适应延伸

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

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

1、在List中添加滚动条:

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

2、使用Scroll组件:

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

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

 

posted @   听着music睡  阅读(84)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示