Flex scroll自动追踪文字
最近做了一个类似qq聊天面板的东西,在做的时候遇到了一些问题,于是记录下来,一是对其他人的帮助,另外也是一个回顾。
面板的布局设计在此不赘述,直接讲我的问题。我们都知道qq的聊天面板有一个scroll,我们输入文字的时候它会自动地跟随文字滚到最下面。我通过如下方法实现:1. 使用updateComplete事件;2. 使用容器的verticalScrollPosition属性对scroll进行定位。
updateComplete在容器的任何视觉改动的情况下都会发生,当然也包括添加了新的组件(我通过添加新组件实现聊天信息的即时展示)。于是我们有如下代码:
VBox
1 <mx:VBox id="vd" updateComplete="updateCompleteHandler(event)" x="20" y="10" height="275" width="376">
2 </mx:VBox>
2 </mx:VBox>
1 private function updateCompleteHandler(evt:Event):void
2 {
3 this.vd.verticalScrollPosition=this.vd.maxVerticalScrollPosition;
4 }
2 {
3 this.vd.verticalScrollPosition=this.vd.maxVerticalScrollPosition;
4 }
但是这样就会产生一个问题,当我想在这个VBox中回看聊天记录的时候我会拖动scroll向上翻,这时无论我如何滚动scroll,面板中的内容永远都是最后的内容,因为每次滚动scroll 面板中的视图发生变化,updateComplete事件就会触发,所以不管怎么滚动scroll都会重新被定位到最低端。
我的解决办法是给面板添加一个Event.SCROLL事件。添加如下内容:
代码
1 private var isAutoVerticalScrollPolicy:Boolean=true;
2
3 private function init():void
4 {
5 this.vd.addEventListener(Event.SCROLL, onTxtScroll);
6 }
7
8
9 private function onTxtScroll(event:Event):void{
10 isAutoVerticalScrollPolicy = false;
11}
2
3 private function init():void
4 {
5 this.vd.addEventListener(Event.SCROLL, onTxtScroll);
6 }
7
8
9 private function onTxtScroll(event:Event):void{
10 isAutoVerticalScrollPolicy = false;
11}
然后将之前的updateCompleteHandler方法修改如下:
1 private function updateCompleteHandler(evt:Event):void
2 {
3 if (isAutoVerticalScrollPolicy == true)
4 {this.vd.verticalScrollPosition=this.vd.maxVerticalScrollPosition;
5 }
6 }
2 {
3 if (isAutoVerticalScrollPolicy == true)
4 {this.vd.verticalScrollPosition=this.vd.maxVerticalScrollPosition;
5 }
6 }
至于什么时候把isAutoVerticalScrollPolicy设置成true,我是在点击发送按钮和接收到新的信息之后修改的,因为我们只有在聊天内容改变的时候才希望触发updateComplete事件,把scroll定位到低端。
以上是我个人的一个解决方案,欢迎更好的思路和方案。