鸿蒙界面开发(八):Grid网格布局Badge角标组件

Badge角标组件

在目标组件的外层包裹一层Badge角标组件
支持位置:右上,左,右
也可以使用绝对定位实现更灵活的角标位置。

Badge({count:1,//角标数值,角标数值为0时不展示position:BadgePosition.RightTop,//角标位置,只有三个style:{//角标样式fontSize:14,badgeSize:20,badgeColor:'#fa2a2d'}}){Image($r('app.media.bg_00')).width(100)}

网格布局——Grid容器

在规则的行列布局中非常常见
ArkUI提供了Grid容器组件和子组件GridItem,用于构建网格布局。

布局与约束

Grid组件为网格容器,其中容器内各条目对应一个GridItem组件
在这里插入图片描述
说明:Grid的子组件必须是GridItem组件。
Grid组件根据行列数量与占比属性的设置,可以分为三种布局情况:

  1. 行、列数量与占比同时设置:Grid只展示固定行列数的元素,其余元素不展示,且Grid不可滚动。(推荐使用该种布局方式)

  2. 只设置行、列数量与占比中的一个:元素按照设置的方向进行排布,超出的元素可通过滚动的方式展示。

  3. 行列数量与占比都不设置:元素在布局方向上排布,其行列数由布局方向、单个网格的宽高等多个属性共同决定。超出行列容纳范围的元素不展示,且Grid不可滚动。

设置排列方式

设置行列数量与占比

Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。
rowsTemplate和columnsTemplate属性值是一个由多个空格和’数字+fr’间隔拼接的字符串,fr的个数即网格布局的行或列数,fr前面的数值大小,用于计算该行或列在网格布局宽度上的占比,最终决定该行或列宽度。

Grid() {...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

在这里插入图片描述
说明: 当Grid组件设置了rowsTemplate或columnsTemplate时,Grid的layoutDirection、maxCount、minCount、cellLength属性不生效,属性说明可参考Grid-属性。

设置子组件所占行列数

在Grid组件中,可以通过创建Grid时传入合适的GridLayoutOptions实现单个网格横跨多行或多列的场景,其中,irregularIndexesonGetIrregularSizeByIndex可对仅设置rowsTemplate或columnsTemplate的Grid使用;onGetRectByIndex可对同时设置rowsTemplate和columnsTemplate的Grid使用。

在网格中,可以通过onGetRectByIndex返回的[rowStart,columnStart,rowSpan,columnSpan]来实现跨行跨列布局,其中rowStart和columnStart属性表示指定当前元素起始行号和起始列号,rowSpan和columnSpan属性表示指定当前元素的占用行数和占用列数。

layoutOptions: GridLayoutOptions = {regularSize: [1, 1],onGetRectByIndex: (index: number) => {if (index == key1) { // key1是“0”按键对应的indexreturn [5, 0, 1, 2]} else if (index == key2) { // key2是“=”按键对应的indexreturn [4, 3, 2, 1]}// ...// 这里需要根据具体布局返回其他item的位置}
}Grid(undefined, this.layoutOptions) {// ...
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('2fr 1fr 1fr 1fr 1fr 1fr')

设置主轴方向——layoutDirection

通过layoutDirection设置网格布局的主轴方向,决定子组件的排列方式。此时可以结合minCount和maxCount属性来约束主轴方向上的网格数量。

Grid() { ...}
.maxCount(3)
.layoutDirection(GridDirection.Row)
GridDirection.Row  先从左到右排列,排满一行再排下一行。
GridDirection.Column  先从上到下排列,排满一列再排下一列

说明
layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时生效,此时元素在layoutDirection方向上排列。
仅设置rowsTemplate时,Grid主轴为水平方向,交叉轴为垂直方向。
仅设置columnsTemplate时,Grid主轴为垂直方向,交叉轴为水平方向。

在网格布局中显示数据——GridItem子组件

Grid组件可以通过二维布局的方式显示一组GridItem子组件。
对于内容结构相似的多个GridItem,通常更推荐使用ForEach语句中嵌套GridItem的形式,来减少重复代码。

@Entry
@Component
struct OfficeService {@State services: Array<string> = ['会议', '投票', '签到', '打印']build() {Column() {Grid() {ForEach(this.services, (service:string) => {GridItem() {Text(service)}}, (service:string):string => service)}.rowsTemplate(('1fr 1fr') as string).columnsTemplate(('1fr 1fr') as string)}}
}

设置行列间距

通过Grid的rowsGap和columnsGap可以设置网格布局的行列间距。
单位vp

Grid() {...
}
.columnsGap(10)//列之间的间距,竖直的列
.rowsGap(15)//行之间的间距

构建可滚动的网格布局

在设置Grid的行列数量与占比时,如果仅设置行、列数量与占比中的一个,即仅设置rowsTemplate或仅设置columnsTemplate属性,网格单元按照设置的方向排列,超出Grid显示区域后,Grid拥有可滚动能力。
如果设置的是columnsTemplate,Grid的滚动方向为垂直方向;如果设置的是rowsTemplate,Grid的滚动方向为水平方向。

控制滚动位置

Grid组件初始化时,可以绑定一个Scroller对象,用于进行滚动控制,例如通过Scroller对象的scrollPage方法进行翻页。

private scroller: Scroller = new Scroller()

应用响应点击事件,通过指定scrollPage方法的参数next为true,滚动到下一页。

Column({ space: 5 }) {Grid(this.scroller) {}.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')Row({space: 20}) {Button('上一页').onClick(() => {this.scroller.scrollPage({next: false})})Button('下一页').onClick(() => {this.scroller.scrollPage({next: true})})}
}

性能优化

与长列表的处理类似,循环渲染适用于数据量较小的布局场景,当构建具有大量网格项的可滚动网格布局时,推荐使用数据懒加载方式实现按需迭代加载数据,从而提升列表性能。
Grid组件中也可通过cachedCount属性设置GridItem的预加载数量,只在懒加载LazyForEach中生效。

设置预加载数量后,会在Grid显示区域前后各缓存cachedCount*列数个GridItem,超出显示和缓存范围的GridItem会被释放。

Grid() {LazyForEach(this.dataSource, () => {GridItem() {}})
}
.cachedCount(3)

说明
cachedCount的增加会增大UI的CPU、内存开销。使用时需要根据实际情况,综合性能和用户体验进行调整。

案例

在这里插入图片描述

应用到了:网格布局、ForEach渲染、层叠布局、badge角标、遮罩显影、透明度层级与缩放动画、注册点击事件、随机数、控制展示(换图)、累加、反引号${}拼接字符串的使用

// 定义接口
interface  ImageCount{url: string,//图片地址count: number//角标数值
}
@Entry
@Component
struct Index {@State message: string = 'Hello World';//基于接口,准备数据@State images: ImageCount[]=[{url: 'app.media.bg_00',count: 0},{url: 'app.media.bg_01',count: 0},{url: 'app.media.bg_02',count: 0},{url: 'app.media.bg_03',count: 0},{url: 'app.media.bg_04',count: 0},{url: 'app.media.bg_05',count: 0},]//控制遮罩层@State maskOpacity: number = 0@State maskZIndex: number = -1//控制图片缩放@State imageW: number = 0@State imageH: number = 0//取随机图片@State randomIndex: number = -1build() {Stack(){Column(){Grid(){ForEach(this.images,(item:ImageCount,index:number)=>{GridItem(){Badge({count:item.count,position:BadgePosition.RightTop,style:{fontSize:14,badgeSize:20,badgeColor:'#fa2a2d'}}){Image($r(item.url)).width(80)}}})}.columnsGap(10)//行间距.rowsGap(10).layoutDirection(GridDirection.Row).maxCount(3)//主轴方向子组件存在最多的个数.rowsTemplate('1fr 1fr')//控制均匀分布,两行x三列.columnsTemplate('1fr 1fr 1fr').width('100%').height(300)// .backgroundColor('#666')// .border({//   width:2,//   color:Color.Red// }).margin({top:100}).padding(5)Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({top:50}).onClick(()=>{this.maskOpacity = 1;this.maskZIndex = 99;//点击时图片缩放this.imageW = 1;this.imageH = 1;//生成随机数this.randomIndex = Math.floor(Math.random() * 6)//取【0,1,2,3,4,5】})}.width('100%').height('100%')//抽卡弹层Column({space:10}){Text('获得生肖卡').fontColor('#f5ebcf').fontSize(25).fontWeight(FontWeight.Bold)Image($r(`app.media.img_0${this.randomIndex}`)).width(200).scale({x: this.imageW,y: this.imageH}).animation({duration:500})Button('开心收下').width(200).height(50).backgroundColor(Color.Transparent).border({width:2,color:'#fff9e8'}).onClick(()=>{this.maskOpacity = 0;this.maskZIndex = -1;this.imageW = 0;this.imageH = 0;//对象数组更新,需要替换整个对象,只修改单个属性,不能更新this.images[this.randomIndex] = {url:`app.media.img_0${this.randomIndex}`,count: this.images[this.randomIndex].count+1}})}.width('100%').height('100%').backgroundColor('#b3000000')//前两位表示透明度.justifyContent(FlexAlign.Center).opacity(this.maskOpacity).zIndex(this.maskZIndex).animation({//元素的动画显示duration:100})}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/412459.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

换毛季猫咪化身掉毛怪,宠物浮毛如何清理?推荐用宠物空气净化器

我家现在有三只毛孩子&#xff0c;养宠的幸福是三倍&#xff0c;除毛的烦恼也是三倍。尤其还有两只是银渐层&#xff0c;掉毛量实在是太夸张了&#xff0c;衣服、地板、水杯家里到处都是。我也每天早晚都给它们梳毛&#xff0c;卫生也定期清理&#xff0c;可还是浮毛满天飞。 …

kafka集群

cd /opt/software 把kafka压缩包拉进来 并解压到/usr下 tar -xzvf /opt/software/kafka_2.12-2.7.0.tgz -C /usr/ 改名 mv /usr/kafka_2.12-2.7.0/ /usr/kafka 配置环境变量 vim /etc/profile大写G定位到最后一行 在 o 在下一行添加kefka环境变量export JAVA_HOME/usr…

店招起名“大润發”,侵犯“大润发”商标权赔偿8000元!

近日某干果店招为“大润發水果干果批发”的店铺&#xff0c;因侵犯“大润发”注册商标专用权&#xff0c;赔偿原告所属主体共计人民币8000元&#xff0c;有些人起店招名称喜欢傍大牌&#xff0c;这样很容易侵犯商标权。 有些聪明的人会想&#xff0c;大牌商标是繁体&#xff0c…

ssrf实现

一、SSRF &#xff08;Server-side Request Forge, 服务端请求伪造&#xff09; 1、概念&#xff1a; 它是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下&#xff0c;SSRF攻击的目标是从外网无法访问的内部系统。正是因为它是由服务端发起的&#xff0c;所…

【GPT】Coze使用开放平台接口-【4】创建机器人

在前面三篇&#xff0c;我们分别创建了插件&#xff0c;插件里面添加了多个工具。接着&#xff0c;我们把插件添加到工作流内&#xff0c;成为一个开放平台API的调用节点&#xff0c;从而创建出一条业务流。分别是&#xff0c;语音伪造检测工作流&#xff0c;以及通话语音内容分…

【JVM】亿级流量调优(二)

亿级流量调优 指针压缩 -XX:-UseCompressedOops指针压缩技术只有64位机器才有。jdk6以后引入的技术&#xff0c;默认是开启的 关闭指针压缩的情况下 通过HSDB用Memory Viewer查看该对象在内存中的分配地址发现类型指针占8字节&#xff0c;0x3其实是数组的长度&#xff0c;前…

全面解析:动态住宅代理的关键优势

在大数据时代的背景下&#xff0c;代理IP成为了很多企业顺利开展的重要工具。代理IP地址可以分为住宅代理IP地址和数据中心代理IP地址。选择住宅代理IP的好处是可以实现真正的高匿名性&#xff0c;而使用数据中心代理IP可能会暴露自己使用代理的情况。 住宅代理IP是指互联网服务…

代码随想录第十天——LeetCode 150. 逆波兰表达式求值、239. 滑动窗口最大值、347.前 K 个高频元素

150. 逆波兰表达式求值 力扣题目链接(opens new window) 根据 逆波兰表示法&#xff0c;求表达式的值。 有效的运算符包括 , - , * , / 。每个运算对象可以是整数&#xff0c;也可以是另一个逆波兰表达式。 说明&#xff1a; 整数除法只保留整数部分。 给定逆波兰表达式总是…

夜深了,赶紧根据软件系统建模建设一个房屋租赁服务系统,坐上收租大佬宝座,走上人生巅峰

目录 案例 【题目】 【问题 1】(12 分) 【问题 2】(5 分) 【问题 3】(8 分) 【答案】 【问题 1】答案 【问题 2】答案 【问题 3】答案 相关推荐 案例 阅读以下关于软件系统建模的叙述&#xff0c;在答题纸上回答问题 1 至问题 3。 【题目】 某公司欲建设一个房屋租赁服务…

如何在你vs code和ide编译器使用AI

vs code举例。先看效果图 2个步骤轻松拥有 1、注册豆包AI账号&#xff1a;点击注册 2、在vs code中安装&#xff1a; 第一种方法&#xff1a;快速安装 第二种方法&#xff1a;手动安装, 第1步&#xff1a;安装 Visual Studio Code 后&#xff0c;左侧导航栏上点击扩展。 第2步…

【C/C++】C语言中的内存分布

在C语言中&#xff0c;内存分布主要可以分为以下几个区域&#xff1a; 栈&#xff08;Stack&#xff09;&#xff1a;由编译器自动分配和释放&#xff0c;存放函数的参数值、局部变量的值等。 堆&#xff08;Heap&#xff09;&#xff1a;一般由程序员分配和释放&#xff0c;若…

SpringBoot异常处理原理分析

springboot默认机制 错误处理的自动配置都在ErrorMvcAutoConfiguration中&#xff0c;两大核心机制&#xff1a; SpringBoot 会自适应处理错误&#xff0c;响应页面或JSON数据 SpringMVC的错误处理机制依然保留&#xff0c;MVC处理不了&#xff0c;才会交给boot进行处理 发生…

K 个一组翻转链表

题目 给你一个链表&#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回翻转后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。 如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 进阶&#xff1a; 你可以设计一个只…

2024年【A特种设备相关管理(A4电梯)】考试报名及A特种设备相关管理(A4电梯)考试资料

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 A特种设备相关管理&#xff08;A4电梯&#xff09;考试报名是安全生产模拟考试一点通总题库中生成的一套A特种设备相关管理&#xff08;A4电梯&#xff09;考试资料&#xff0c;安全生产模拟考试一点通上A特种设备相关…

AI模型:追求全能还是专精?

近日&#xff0c;OpenAI预计在秋季推出代号为“草莓”的新AI。从专注于数学问题到处理主观营销策略&#xff0c;"草莓"模型展现出惊人的多样性。而这种全能型 AI 是否代表了未来趋势&#xff1f;相比专攻于某一领域的专业型AI产品&#xff0c;全能型AI产品是否一定具…

全免费的数据恢复工具推荐!这几个不容错过!

不小心的数据丢失总会带来许多困扰&#xff0c;不过这些困扰也能通过一些全免费的数据恢复工具解决。接下来&#xff0c;就来给大家介绍几款好用的数据恢复工具&#xff01; 第一款&#xff1a;福昕数据恢复 直达链接&#xff1a;www.pdf365.cn/foxit-restore/ 福昕数据恢复…

苹果秋季发布会前瞻:iPhone 16领衔新品盛宴

苹果定档9月9日&#xff0c;揭开新品神秘面纱 苹果公司近日正式宣布&#xff0c;将于9月9日在加州库比蒂诺的Apple Park&#xff0c;史蒂夫乔布斯剧院举办年度秋季新品发布会&#xff0c;主题为“It’s Glowtime”&#xff0c;预示着Siri界面将迎来一场华丽变身。此次发布会较原…

一分钟学会万用表

目录&#xff1a; 1、电池的安装 1&#xff09;指针万用表 2&#xff09;数字万用表 3&#xff09;高精度表 2、表笔的分类 3、表笔安装 5、常用测量方法 1&#xff09;二极管测量 2&#xff09;电阻与通断测量 3&#xff09;电压测量 4&#xff09;电流测量 …

[C++]AVL树插入和删除操作的实现

AVL树又称为高度平衡的二叉搜索树,是1962年由两位俄罗斯数学家G.M.Adel’son-Vel’skii和E.M.Landis提出的。ALV树提高了二叉搜索树树的搜索效率。为此,就必须每向二叉搜索树插人一个新结点时调整树的结构,使得二叉搜索树保持平衡,从而尽可能降低树的高度,减少树的平均搜索长度…

数分基础(03-3)客户特征分析-Tableau

文章目录 客户特征分析 - Tableau1. 说明2. 思路与步骤3. 数据准备和导入3.1 用EXCEL初步检查和处理数据3.1.1 打开3.1.2 初步检查&#xff08;1&#xff09;缺失值&#xff08;2&#xff09;格式化日期字段&#xff08;3&#xff09;其他字段数据类型&#xff08;4&#xff09…