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{};

可以了。

原文地址：http://chaimzane.javaeye.com/blog/382411