解决关于flex程序中浏览器缩小到某个值时出现滚动条

解决关于flex程序中浏览器缩小到某个值时出现滚动条

 

---------------------------------------------------

author: 小滕
time    : 2011-6-26

 

 

原 问 题 描 述：
    当要求浏览器宽度缩小到500时，横向出现滚动条的问题。

 

解决遇到的问题：
    1.Flex的模板中body的属性中默认scroll="no"，是没有滚动条的。
    2.简单的去掉scroll=0此时就会遇到几个问题（可能初始化时窗口小于500有滚动条，但是和预期的效果不一样，不能控制flash居中）
    3.使用flex中application的滚动条，发现滚动条范围不对（application的minwidth属性值的问题）

 

解  决  方  案：（临时想到的解决方法，肯定有更好的，只是本人对flex了解还太少）

    1.保留html中body的scroll="no"；
   
    2.网页中监听noresize事件
           function resetPage(){
               lenovo.resetWindow();   //flex中已经通过ExternalInterface注册的函数
           }
          
           window.onresize = resetPage;

    3.Flex中组件需要使用x的布局（也可以使用horizontalCenter道理都是根据目前窗口的大小去重新设置这个只，当窗口大小小于500是x=0或者horizontalCenter=-250），这里讲一个宽度为400的组件的x设置为(this.width-400)/2，目的让该组件相对于application居中。
    
    4.设置<mx:application>的horizontalScrollPolicy属性
         horizontalScrollPolicy="{(this.width<500)? 'on':'off'}"
         
    5.Flex中注册函数(要使用ExternalInterface类,使用很简单不会用的看看Flex API)，每次调用回调，需要重新设置组件的布局和是否显示application的滚动条。
          ExternalInterface.addCallback( "resetWindow", resetWindow);
         
          private function resetWindow():void{
               if( this.width <500){
                   this.horizontalScrollPolicy = "on";
               }else{
                   this.horizontalScrollPolicy = "off";
               }
              
               this.loginWin.x = ( ( this.width/2-500/2) >= 0)? ( this.width/2 - 500/2):0;
          }
    
    6.按照上面的操作，在点击浏览器最大化时还可能会导致组件布局中的问题。这个我选择的是加一个定时器，定时去设置application是否显示滚动条和组件的布局。如果加入定时器，那么上面的第二步就不一定是必须的了。可以选择不用。
   
    上面说的只是一种解决问题的思路，由于本人不喜欢直接拿来就用，所以不提供具体实例和源码，只提供解决问题的方法。转载请注明出处：http://baiyejianxin.iteye.com/blog/1105218