这是整个EUI组件的关系。
一般数据容器使用Group,在EUI开发界面后便不需要改变布局,除非自己想改变布局。将子元素添加进来需要指定宽高,不然新添加进来的子元素默认的宽高都是20.
List:
列表组件 List ,继承自 DataGroup,它和 DataGroup 的区别在于:
- 在 List 中选中一项,会触发
eui.ItemTapEvent.ITEM_TAP
事件。 - List有选中项的概念,可以设置 List 中的默认选中项。
1.DataGroup 数据容器
2.ItemRenderer 单条数据模板
步骤:
1.先创建普通数组
2.用ArrayCollection包装这个数组 数据增删改变可以侦听到
3.dataGroup数据源 dataGroup.dataProvider = 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 循环切换自己的位置和显示,这个过程是顺畅的无缝衔接的。
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
最终效果: