Flex 流式布局 之 滚动条篇

Flex 流式布局 之 滚动条篇

 

    flex 框架支持流式布局，什么是流式布局呢，就是在运行时对象的大小是未知的，它可能需要由他的内容(childs)或由它的容器来决定它的实际大小。flex 中有两种流式一种就是 百分比形式的(percentWidth)，还以一种就是默认的 measuredWidth。

 

   那么这个流式布局又和滚动条有什么联系呢？看一下以百分比形式的例子

 

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%" height="100%" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            import mx.controls.Button;
            private function clickHandler():void {
                var bt:Button = new Button();
                inner.addChild(bt);
            }
        ]]>
    </mx:Script>
    <mx:Button label="Button" click="clickHandler()"/>
    <mx:HBox width="100%" height="100%" borderStyle="solid" borderThickness="10" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20">
        <mx:HBox width="100%" height="100%" borderStyle="solid" borderThickness="10" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20">
            <mx:HBox id="inner" width="100%" height="100%" borderStyle="solid" borderThickness="10" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20" borderColor="#43C50A">
            </mx:HBox>
        </mx:HBox>
    </mx:HBox>
</mx:Application>

 

 

3个HBox width height 都是 100%,当点击按钮时，会在最里面的HBox (id=inner ) addChild 一个button，因为是百分比的流式布局那么 最里面的 那个inner在未点击前的大小是由它的parent决定的，这时它实际上是有了已经计算过的measureWidth 和 measureHeight了，但是当有child（这里是button）加入后，它的measure值会变吗？看一下图

 

直到加了5个之后inner的measure值都没变，但是在加第6个时候inner的measure值变了，因为child的视图范围超出了它原来的大小所以就把inner撑大了，从而有导致inner的parent的视图范围超出了inner的parent原来的大小所以inner的parent也被撑大了，就这样一直传到最外面一层，也就是Application，但是Application是有固定大小的是player给它的。

 

    为什么会这样的呢？为什么，滚动条被加到最外层了，而我想让他出现在最里层怎么办？

    首先，来看一下，在第一次inner addchild时发生了写什么。

 

    1.override mx_internal function addingChild(child:DisplayObject):void

           inner.invalidateSize();
           inner.invalidateDisplayList();

           标记inner下一个更新要重新算次村和布局

    2.override mx_internal function childAdded(child:DisplayObject):void

          child.initialize();

          child.invalidateProperties();
          child.invalidateSize();
          child.invalidateDisplayList();

          flex框架级别生命周期开始

   3.（这里只看尺寸和布局相关的），受LayoutManger控制，执行顺序是

        child.invalidateSize();

        inner.invalidateSize();

        inner.invalidateDisplayList();

        child.invalidateDisplayList();

        这个顺序和程序刚开始的顺序是一样的，commit从外到里面，在由measue从里面到外面，在由updatDispalyObject从外到里面。

 

   4.child.invalidateSize();会得到button的尺寸，这里button没有给他具体值，它将采用它的默认值作为它的高宽

       然后inner.invalidateSize();在layoutManager的管理下执行inner.validateSize() 做写什么事情呢，先执行 HBox的布局管理对象layoutObject.measure()，做写什么事情呢,计算inner自己的measure，包括刚刚加进来的buttom 和一些gap，然后根据meause出来的值 判断inner的大小有没有变，如果变了还会调用parent.invalidateSize();parent.invalidateDisplayList();  在执行到inner.invalidateDisplayList();这里会设置inner的大小了(是在public function validateDisplayList():void)

 

好晕哦，问题的关键是什么呢，就在最后一次 addChild 后inner measure出来的值变了,从而导致inner变大了,所以就往外挤，一直把滚动条推到最外面一层。

 

像这样，

 

 那如果想这样,就是这几个嵌套的HBox已经创建了，往inner里面加button，只在inner原有的基础上加滚动条呢?

 

很简单，就是在 inner的layoutObject.measure()时候对于百分比的情况的计算,或则干脆去掉inner.measuer()

 

对于百分比流式布局的inner的大小让parent去控制,好来看一下。

 

override protected function measure():void{};

 

 

可以了。

 

评论

4 楼 love51 2012-09-14  

楼主，我按照你的代码demo,还是不能实现inner中出现滚动条，我不知道问题出在哪里

3 楼 chaimzane 2012-07-10  

chaimzane 写道

显示设置了 width 和 height后，是不会去 measure的，我觉得在设置百分比后，也不应该去meauser的但是，事实却不是的，不知道 Adobe 这样做的原因是什么

chaimzane 写道

显示设置了 width 和 height后，是不会去 measure的，我觉得在设置百分比后，也不应该去meauser的但是，事实却不是的，不知道 Adobe 这样做的原因是什么

还是要的比如 父容器就是顶层容器比如popup出来的 width ＝100%　height = 100% 子容器 width = 100% height = 100% 你认为父容器实际是多大呢， 难道是0么？

2 楼 baixiaozhe 2009-07-30  

辛苦了 辛苦了

1 楼 chaimzane 2009-05-11  

显示设置了 width 和 height后，是不会去 measure的，我觉得在设置百分比后，也不应该去meauser的但是，事实却不是的，不知道 Adobe 这样做的原因是什么