egret:利用ArrayCollection+ list 实现列表渲染优化

本文介绍了一种优化大量数据滑动列表显示的技术方案,通过使用list控件、ItemRenderer及虚拟布局,有效降低了draw值,提高了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、为什么要优化?

  当界面要展示滑动一个列表时,一般可以采用scroller+group的组合,将每一个绑定数据的item创建出来并添加进group中就可以了,即有多少条数据就创建多少个实例。

  但是,当数据很大,甚至上千条时就会出现卡顿现象,打开data-show-fps可以查看draw数值,如果看到它已达到危险范围,就意味着需要优化了,尽量控制数值在安全范围(500以下)。

二、官方提示:

 

三、优化方法

  根据官方提示,可得出优化方法。

  1.直接使用list控件,将list置于scroller的直接子集(必须是直接子集),

  2.将item模板继承于eui.ItemRenderer,

  3.再将获取到的list数据绑定到list控件上,设置useVirtualLayout属性值为true,

  4.最后一步,使用ItemRenderer的dataChanged方法。dataChanged方法在ItemRenderer对象更新数据(data)时调用。

  可以看到效果:两百多条数据,优化之前的draw值为1000以上,优化后降到了392。

 

 

 

   

转载于:https://www.cnblogs.com/WentingC/p/10772760.html

<think>根据用户的问题,用户希望在EgretWing中调整eui.List的数据显示为右对齐。eui.ListEgret EUI库中的一个列表组件,用于显示数据集合。要调整其对齐方式,通常需要自定义项渲染器(itemRenderer)并在其中设置文本或其他组件的文本对齐方式。 步骤: 1.创建一个自定义的项渲染器(例如,继承eui.ItemRenderer)。2.在自定义项渲染器中,将需要右对齐的文本组件的`textAlign`属性设置为`egret.HorizontalAlign.RIGHT`。 3.将List的itemRenderer设置为这个自定义项渲染器。示例:首先,创建一个自定义项渲染器类,例如`RightAlignItemRenderer`:```typescriptclass RightAlignItemRenderer extendseui.ItemRenderer{private label: eui.Label;constructor(){super();this.label =new eui.Label();//设置文本右对齐this.label.textAlign= egret.HorizontalAlign.RIGHT;this.addChild(this.label);}protected dataChanged():void {if(this.data){this.label.text= this.data.toString(); //根据实际数据结构调整}}} ```然后,在创建List时,设置其itemRenderer为这个自定义类: ```typescriptletlist =new eui.List(); list.itemRenderer= RightAlignItemRenderer;//设置数据提供者list.dataProvider =new eui.ArrayCollection([/*数据数组 */]); ```如果使用EXML定义自定义项渲染器,则更常见。例如,创建一个`RightAlignItemRenderer.exml`: ```xml<?xmlversion="1.0"encoding="utf-8"?> <e:ItemRendererxmlns:e="http://ns.egret.com/eui"><e:Label id="labelDisplay"textAlign="right" width="100%" height="100%"verticalAlign="middle"/> </e:ItemRenderer> ```然后在代码中关联这个EXML:```typescriptclass RightAlignItemRenderer extendseui.ItemRenderer{public labelDisplay:eui.Label;//必须与EXML中的id一致public constructor() {super();this.skinName= "RightAlignItemRenderer"; //假设EXML文件在默认路径下}protecteddataChanged(): void{if (this.data&& this.labelDisplay) {this.labelDisplay.text =this.data.toString();}}} ```最后,同样将List的itemRenderer设置为这个自定义渲染器类。 注意事项: -确保EXML文件被正确加载(通常Egret Wing会自动处理)。-如果列表项中有多个文本元素,需要分别设置对齐方式。-如果希望整个列表项内容右对齐,可能需要调整布局,比如设置`horizontalAlign`为`right`(如果使用布局容器)。另外,根据引用[1]中提到的`eui.ArrayCollection`,它是具有事件派发能力的数组,当数据改变时可以自动更新视图。因此,设置数据提供者时使用`eui.ArrayCollection`可以方便数据绑定。 如果用户的问题是关于如何调整现有列表项中文本的对齐方式,那么通过自定义项渲染器并设置文本组件的`textAlign`属性是最直接的方法。相关问题: 1.如何在Egret EUI中自定义列表渲染器?2.EgretList组件的数据绑定如何实现? 3.如何调整EUI组件的文本对齐方式?</think>在 EgretWing 中调整 eui.List 数据的右对齐显示,需要通过自定义项渲染器(itemRenderer)来实现。以下是具体步骤: ### 解决方案 1. **创建自定义项渲染器**: ```typescript class RightAlignRenderer extends eui.ItemRenderer { private label: eui.Label; constructor() { super(); this.label = new eui.Label(); this.label.textAlign = "right"; // 关键:设置右对齐 this.label.verticalAlign = "middle"; this.label.percentWidth = 100; // 宽度100%填充 this.addChild(this.label); } protected dataChanged(): void { if (this.data) { this.label.text = this.data.toString(); // 显示数据 } } } ``` 2. **应用自定义渲染器**: ```typescript const list = new eui.List(); list.itemRenderer = RightAlignRenderer; // 使用自定义渲染list.dataProvider = new eui.ArrayCollection(["数据1", "数据2", "数据3"]); ``` 3. **EXML 皮肤实现**(替代方案): ```xml <!-- RightAlignRenderer.exml --> <e:Skin xmlns:e="http://ns.egret.com/eui"> <e:Label text="{data}" textAlign="right" verticalAlign="middle" left="0" right="0" top="0" bottom="0"/> </e:Skin> ``` 代码中关联皮肤: ```typescript class RightAlignRenderer extends eui.ItemRenderer { constructor() { super(); this.skinName = "RightAlignRenderer"; // 关联EXML } } ``` ### 关键点说明 1. **文本对齐控制**: - 核心属性 `textAlign = "right"` - 垂直居中 `verticalAlign = "middle"` 2. **布局适配**: - 设置 `percentWidth=100` 让标签填满整个单元格 - 在 EXML 中使用 `left="0" right="0"` 实现相同效果 3. **数据绑定**: - 通过 `dataChanged()` 方法更新显示内容 - EXML 中使用 `{data}` 语法自动绑定数据[^1] ### 效果对比 | 默认对齐 | 右对齐实现 | |---------|-----------| | 左对齐文本 | ![右对齐效果](right-aligned-list.png) | | 无法修改对齐方式 | 文本靠右显示 | > 提示:如果列表包含复杂内容,可在自定义渲染器中添加更多组件并分别设置对齐方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值