首页 > 其他分享 >学习笔记(八):ArkUi-线性布局 (Row/Column)自适应拉伸、缩放、延伸

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

时间:2024-10-27 21:09:54浏览次数:4  
标签:滚动条 布局 缩放 Column 元素 适应 线性 ArkUi

一、自适应拉伸

在线性布局下,常用空白填充组件 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

相关文章

  • 学习笔记(六):ArkUi-线性布局 (Row/Column)常用属性
    一、space属性设置排列方向上子元素的间距,使各子元素在排列方向上有等间距效果。 二、alignItems属性设置子元素在交叉轴(排列方向的垂直方向)上的对齐方式。且在各类尺寸屏幕中,表现一致。其中,交叉轴为垂直方向时,取值为VerticalAlign类型,水平方向取值为HorizontalAlign类型。......
  • PbootCMS错误提示:执行SQL发生错误!错误:no such column: def1
    原因:升级过程中SQL语句未执行成功。解决方案:执行以下SQL语句:----------------------------------Sqlite数据库升级脚本--适用于PbootCMS3.0.0版本升级至3.0.6------------------------------------新增多图标题字段ALTERTABLEay_contentADDCOLUM......
  • 鸿蒙编程江湖:ArkUI 的声明式 UI 编程与状态管理
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。ArkTS的UI编程范式ArkUI是华为鸿蒙......
  • HarmonyOS:ArkUI最佳实践(2)状态管理最佳实践
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(MaoistLearning)➤博客园地址:为敢技术(https://www.cnblogs.com/strengthen/ )➤GitHub地址:https://github.com/strengthen➤原文地址:https://www.cnblogs.com/strengthen/p/......
  • HarmonyOS:ArkUI最佳实践(1)ForEach循环渲染
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(MaoistLearning)➤博客园地址:为敢技术(https://www.cnblogs.com/strengthen/ )➤GitHub地址:https://github.com/strengthen➤原文地址:https://www.cnblogs.com/strengthen/p/......
  • [LibreOffice Calc]打印表格时自动缩放到与纸张尺寸匹配
    造冰箱的大熊猫@cnblogs2024/10/22,LinuxMint有没有遇到过打印表格时,表格太宽需要打印到多页上的情况,这时候手动缩放表格太费劲,如何自动呢?1、打开预览,File>>PrintPreview,或者Shift+Ctrl+O 2、在工具栏中点击FormatPage按钮(带齿轮那个) 3、在PageStyle对话框中,选择S......
  • PbootCMS执行SQL发生错误!错误:no such column: def1
    当您在升级PbootCMSv3.0.6版本时遇到“执行SQL发生错误!错误:nosuchcolumn:def1”或“执行SQL发生错误!错误:duplicatecolumnname:picstitle”的提示,通常是因为数据库字段没有正确添加或已经存在。以下是一些解决方法:解决步骤备份数据库:在进行任何数据库操作之前,务必先备......
  • PbootCMS执行SQL发生错误!错误:duplicate column name: picstitle
    使用SQL命令手动添加字段登录MySQL:使用命令行工具或SSH连接到您的服务器,登录MySQL:sh mysql-uyour_username-p输入密码后,选择您的PbootCMS数据库:sql USEyour_database_name;执行SQL命令:执行添加字段的SQL命令:sql ALTERTABLE`pboot_arti......
  • ArkUI-Image详解
    ArkUI-Image详解本地资源创建文件夹,将本地图片放入ets文件夹下的任意位置。Image组件引入本地图片路径,即可显示图片(根目录为ets文件夹)。Image('images/pic1.webp').width(100).height(100)Resource资源使用资源格式可以跨包/跨模块引入图片,resources文件......
  • HarmonyOS ArkUI性能优化实践:长列表加载性能优化
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(MaoistLearning)➤博客园地址:为敢技术(https://www.cnblogs.com/strengthen/ )➤GitHub地址:https://github.com/strengthen➤原文地址:https://www.cnblogs.com/strengthen/p/......