List添加子项的逐个显示问题
通常情况下你会这么使用Flex List
用as声明一个数据源例如:
[Bindable] private var dataArray:ArrayCollection = new ArrayCollection(...);//...这里指省略的数组内容
然后用mxml声明一个list,类似的代码如下:
<mx:List id="list0" width="165" dataProvider="{dataArray}".../> //...这里指省略后面的属性
然后一个普通的List就得到了
你可能会注意到,list中的所有项是一起“瞬间”加入的,似乎略显突兀。
那么如何使元素项 一次次、按照自己的意愿,慢慢的加入呢?
1.通过改变list组件大小,从视觉上“伪装”
事实上,这并不是根本的解决办法,而且似乎声东击西了。
思路是结合Flex基本效果,动态拉伸list组件大小。这样看起来这个list像是被一点点展开,有点接近我们所需要的效果了。但事实上仍然不是我们所要的,因为这样做的本质其实还是一次性装入数据源的。
2.结合List元素项改变效果,定时添加
查阅Flex API(我这里的版本是3.x), List
itemsChangeEffect 触发事件: itemsChange 当控件的数据提供程序发生更改时播放的数据效果。 默认情况下,List 控件不使用数据效果。对于 List 控件,将使用 DefaultListEffect 类的实例配置数据效果。 List
这里值得一提的是:itemsChangeEffect仅仅在List TileList的API中存在,在dataGrid和HorizontalList中不存在
TileList HorizontalList和List、DataGrid均继承于ListBase(从命名上看 其实DataGrid也是一种list,就像你可以把它的每一列看成一个List)
为什么DataGrid中没有提供这个?也许有API开发人员的难处(或许出于性能考虑),也许dataGrid中有其他方式可以更好的实现 没必要itemsChangedEffect
话说回来,一个可能的简单效果是这样:
<mx:DefaultListEffect id="myEffect" fadeOutDuration="1000"/>
然后在mxml里的list声明里,用itemsChangeEffect="myEffect"
<mx:List id="list0" width="165" dataProvider="{dataArray}" itemsChangeEffect="{myDLE} .../>//...这里指省略后面的属性
有了效果,我们就需要"效果触发器了"(也就是如何引发这个效果产生)
这里我们可以利用Timer定时器定时的给list数据源dataArray添加数据
Timer类的用法其实和Java里比较相似,你必须手动调用start方法
var myTimer:Timer = new Timer(500,5);//间隔500ms, 重复5次.API中的构造函数:Timer(delay:Number, repeatCount:int = 0), 默认repeatCount=0即一直循环 myTimer.addEventListener(TimerEvent.TIMER,addItem); myTimer.start();
这里的addItem方法(其实目的就是改变dataArray)
private var i:int = 0; private function addItem(evt:TimerEvent):void { dataArray.addItem("item" + (i++)); }
基本就这么多了,然后运行测试。
list数据项是一个一个添加的,并且添加的过程中会有淡入的效果。
同样,你也可以设置删除时的效果。这里我就不赘述了