flex 滚动条问题

flex滚动条虽然很好用，但总是会出现意想不到的问题。前几天说了，拖动后花屏的问题，今天又发现了更恶心的问题。当你把容器的宽度调为100%后 ，verticalScrollbarPolicy 用默认的auto。这是如果你缩放窗口会出现滚动条，但问题这是就出现了，只要出现了垂直滚动条，水平滚动条就是被迫出现。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"> <mx:Canvas width="100%" height="700"/> </mx:Application>

这是是由于flex在计算前面的百分比时，把垂直滚动条的宽度也算上了，我一开始以为是flex的bug。使其他的官方文档中写了一句很华丽的话。

"Flex considers scroll bars in its sizing calculations only if you explicitly set the scroll policy to ScrollPolicy.ON. So, if you use an auto scroll policy (the default), the scroll bar overlaps the buttons. To prevent this behavior, you can set the height property for the HBox container or allow the HBox container to resize by setting a percentage-based width. Remember that changing the height of the HBox container causes other components in your application to move and resize according to their own sizing rules."

-- From Sizing Components in the Flex 3 help, under "Using Scroll bars"

 

就这样回避了这个问题。但有个办法你可以解决这个问题，重载validateSize方法

// In your Application ，module or wherever you need this workaround. override public function validateSize(recursive:Boolean = false):void { super.validateSize(recursive); if (!initialized) return; if (height < measuredHeight) verticalScrollPolicy = ScrollPolicy.ON; else verticalScrollPolicy = ScrollPolicy.OFF; }