继为List添加序号之后,老总又提出了新的要求:为列表中的当前选中项添加一个指示图标。
在得到正确解决方案之前,我因此苦恼了两天。尝试了许多种方法,都没有得到理想的结果。但是把基本问题搞清楚了,为列表中的当前选项添加指示图标,情况有三种:
1. 列表项之间切换时(鼠标点击列表项,或通过键盘上下选中列表项)
2. 新添加列表项
3. 删除列表项
第一个比较好解决,但是第2个和第3个问题看似简单,但做起来却经常和第一个发生冲突。
艰难的求解里程不在此多说了,直接切入主题。
还好感谢《Flex 3 Cookbook中文版》第五章13节所讲解的内容。其实不必自己去想的那么多,List组件中有两个“效果”我们应该能够注意到:一个是当列表项被选中的效果,另一个是当鼠标移到列表项但还未选中(点击)的效果。其中drawHighlightIndicator就是还未选中的效果(高亮效果),drawSelectionIndicator是选中的效果。这两个效果被封装在这两个方法中,代码如下:
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml" selectionColor="#ffcccc"> <mx:Script> <![CDATA[ import mx.controls.listClasses.IListItemRenderer; [Embed("../../assets/outline_arrow.gif")] private var img:Class; [Embed("../../assets/in_arrow.gif")] private var highlight_img:Class; override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItem Renderer):void { var this_img:Object = new highlight_img(); indicator.addChild((this_img as DisplayObject)); (this_img as DisplayObject).x = itemRenderer.width - (this_img as Disp layObject).width super.drawHighlightIndicator(indicator, x, y, width, height, 0xff0000, itemRenderer); } override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer: IListItemRenderer):void { var this_img:Object = new img(); indicator.addChild((this_img as DisplayObject)); (this_img as DisplayObject).x = itemRenderer.width - (this_img as DisplayObject).width super.drawSelectionIndicator(indicator, x, y, width, height, 0xffcccc, itemRenderer); } ]]> </mx:Script> </mx:List>
indicator.addChild(...)是将图像加入到渲染器中,紧接着的一行是图像的位置,然后通过调用父类方法传递参数并改变选中和高亮颜色。有了这个方法,我的苦思冥想真是不值得。荀子曰:“吾尝终日而思矣,不如须臾之所学也。”,此话是也。