Flex中List序号乱序的解决方案（第一次修订，于2009年12月9日）

（第一次修订，于2009年12月9日）

 

想要做的事: 使用使用List的ItemRenderer，为List中的每一项都加一个序号。

出现的问题: 当为List添加多个ItemRenderer的时候，会出现重复的序号。

做法: ItemRenderer实现IDropInListItemRenderer，重写listData属性，并绑定DataChange事件。让ItemRenderer中的Text控件text绑定listData.selectedIndex+1。

 

本来想这样就能够实现1、2、3、4、5、……的序号的，但是没有想到添加前4个序号的时候，一切都是正常。但是，当添加第5个序号的时候，滑动一下滚动条就会发现本来应该是5的序号变成了4，在往上滚动滚动条，2也变成了1。来回滚动滚动条，序号更不得了，变得全乱了。

网上查了许多中方法，也许是本人太笨，并没有找到好的解决方案。看了Oreilly的Cookbook也没有看明白，但是我确定第七章最后一节一定有我想要的答案，于是我拼命的理解，拼命的尝试。

COOKBOOK中 写道

It is important to remember that the item renderer is reused by the List. When trying to set states in an item renderer when it is selected, the data of the item renderer must be compared with the selectedItem in the List or DataGridColumn rather than the selectedIndex, because the selectedIndex does not indicate which renderer is selected. In fact, the selected renderer could very well be scrolled away from in the List.

 

中文版翻译节选 写道

当试图在渲染器被选中为其设置状态时，项目渲染器的数据必须与List或DataGridColumn中的selectedItem进行比较，而不是与selectedIndex比较，因为selectedIndex不能指出是哪个渲染器被选中。实际上，被选中的渲染器能够在List中很好地滚动显示。

 通过这段文字可以知道，产生序号乱序的原因是我滚动了滚动条。不能仅仅使用listData.selectedIndex+1的方法赋值。必须要用itemRenderer中的数据同selectedItem进行比较。

结论：

在原来的基础上仅仅将Text控件的text属性绑定{ ArrayCollection((_listData.owner as List).dataProvider).getItemIndex(this.data)+1} 就可以实现正常的序号显示了，其实非常简单。

 

第一次修订：

注意组件的绑定属性：{ ArrayCollection((_listData.owner as List).dataProvider).getItemIndex(this.data)+1}中的ArrayCollection也有可能是其他类型，如XMLListCollection。