EUI学习之DataGroup与List

这是整个EUI组件的关系。

一般数据容器使用Group，在EUI开发界面后便不需要改变布局，除非自己想改变布局。将子元素添加进来需要指定宽高，不然新添加进来的子元素默认的宽高都是20.

1.DataGroup 数据容器
2.ItemRenderer 单条数据模板

步骤：

1.先创建普通数组
2.用ArrayCollection包装这个数组数据增删改变可以侦听到
3.dataGroup数据源 dataGroup.dataProvider = new eui.ArrayCollection(数据的数组).

如果没用eui.scroller,使用手动修改或刷新了数据源，则需要重新设置。

添加一句代码

 myList.dataProvider = new eui.ArrayCollection(数据的数组);

4.创建ItemRenderer 这是一个类。可以设置皮肤 dataChaged方法是复写的

5.dataGroup.itemRenderer = 创建的ItemRenderer类。

如果 ItemRenderer 类中只是显示皮肤，没有自定义的逻辑方法。完全可以不创建自定义的 ItemRenderer 类，而通过 dataGroup.itemRendererSkinName() 方法直接使用 exml 描述文件来实现皮肤显示和数据绑定。显示效果完全相同，但可以少写一个类文件。

数据优化：
DataGroup 中有一个属性 useVirtualLayout，默认为 true，这个属性决定了列表创建内部对象的策略：

策略1

useVirtualLayout = false;
有多少条数据就创建多少个 ItemRenderer 的实例

策略2
useVirtualLayout = true;

3.一般配合 Scroller 使用。 EUI中，Scroller包含的List默认赋值给Scroller.这时设置List的宽高是无效的。如果所有的数据显示宽高之和没有Scroller的宽高大，则不会拖动，超过了才会有拖动的效果。数据的显示宽高在ItemRenderer皮肤或者类中指定。
DataGroup 会根据组件的尺寸，计算同时最多能显示多少个组件，根据这个数字创建一组 ItemRenderer 并循环使用。当您滚动切换数据的时候，只是这一组 ItemRenderer 循环切换自己的位置和显示，这个过程是顺畅的无缝衔接的。

注意的点：

自定义的ItemRenderer，应该继承 eui.ItemRenderer，然后在内部添加自定义的功能
将数据对应到显示的语句，应该放在 dataChanged方法中，当数据改变并且皮肤已经创建完毕的情况下这个方法会被执行。这样的好处是，保证您调用的皮肤部件一定是实例化完成的。

然后我们将自定义的 LabelRenderer 类赋值给 itemRenderer 属性

2.list:

列表组件 List ，继承自 DataGroup，它和 DataGroup 的区别在于：

在 List 中选中一项，会触发 eui.ItemTapEvent.ITEM_TAP 事件。
List有选中项的概念，可以设置 List 中的默认选中项。

var list = new eui.List();
list.dataProvider = new eui.ArrayCollection(["item1","item2","item3"]);
list.itemRendererSkinName = exml;
this.addChild(list);
this.list = list;
list.selectedIndex = 1;//设置默认选中项
list.addEventListener(eui.ItemTapEvent.ITEM_TAP,this.onChange,this);
}
private onChange(e:eui.PropertyEvent):void{
//获取点击消息
console.log(this.list.selectedItem,this.list.selectedIndex)
}

设置默认选中项

list.selectedIndex = 1;

获取当前选中项的信息

list.selectedItem
list.selectedIndex

List 还可以开启多选状态

list.allowMultipleSelection = true;

多选状态下，List 中所有的条目都可以被选中，再次点击选中的条目则会取消选中，恢复原状。

此时监听 eui.ItemTapEvent.ITEM_TAP 事件，可以通过下面两个属性获得一个数组，里面包含了当前处于选中状态的项目：

list.selectedIndices
list.selectedItems

最终效果：

EUI学习之DataGroup与List相关推荐

EUI组件之DataGroup
看官网教程,这个没法单独用. http://developer.egret.com/cn/github/egret-docs/extension/EUI/dataCollection/dataGrou ...
EUI学习之Group
简单容器( Group ) http://developer.egret.com/cn/github/egret-docs/extension/EUI/container/group/index.ht ...
EUI学习笔记（持续更新中）
目录一. 创建UI 1. copy(以拷贝的方式新建) 2. 改名 3. new AssetBundle 4.生成代码二.控件 1.创建 2.命名三.代码结构 1.DlgTestSystem.c ...
Eui基于vue开箱即用的免费后台开源框架
前言致力于快速开发和vue的开发学习,通过Eui你可以直观的感受到前后端分离带来的便捷和高效.同时你也可以通过Eui学习到vue的基本开发形式,缩短您开发的进度,增强直观体验. 简介 Eui是基于V ...
Egret之eui.Scroller
(纯码农制作 ,不喜勿喷)先看看结果 : 一 : Cell(render) Skin 的制作: 看结果是横向的滚动 , 向左 . 如果第一次显示第二个cell , 那么需向左滑动Cell的宽度 + C ...
Egret入门学习日记 --- 第二篇
第二篇(学习篇) 既然选好了Egret,那我就要想想怎么学了. 开始第一步,先加个Q群先,这不,拿到了一本<Egret HTML5游戏开发指南>,阅至三章,得到印象相对较深的好处和坏处: ...
白鹭h5加java_白鹭引擎EUI做H5活动入门篇
前言: 本学习文档的目的是为了实现h5,或者简单的h5游戏,比如说,我们要实现一个可以左右,或者上下移动的场景的h5,在场景移动的过程中,会有相应的动画或者操作,我们通过 js 也可以实现,但是为了流 ...
强化学习的学习之路（十）_2021-01-10:K臂老虎机介绍及其Python实现
作为一个新手,写这个强化学习-基础知识专栏是想和大家分享一下自己学习强化学习的学习历程,希望对大家能有所帮助.这个系列后面会不断更新,希望自己在2021年能保证平均每日一更的更新速度,主要是介绍强化学 ...
Egret的eui的使用
一.如何使用exml: //1.直接使用 var button = new eui.Button(); button.skinName = "resource/skins/ButtonSki ...
推荐系统组队学习03、矩阵分解
矩阵分解矩阵分解矩阵分解算法的原理 **矩阵分解算法的求解** Basic SVD 编程实现补充协同过滤算法: 特点: 仅利用了用户与物品的交互信息就可以实现推荐,是一个可解释性很强, 非常直 ...

EUI学习之DataGroup与List

EUI学习之DataGroup与List相关推荐

最新文章

热门文章