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{};
可以了。
