Flex 4 容器加滚动效果
Flex SDK 4(Gumbo)里面把滚动条看成了一个独立的容器来对待,即Scroller。
因此容器如有滚动需要,需要单独加Scroller组件才可以实现滚动效果。
在Flex4里面Scroller是一个地地道道可视化组件,其地位与spark其他的组件(如Group、Button等是一样的地位) ,这样做的好处:
1、把容器的滚动属性单独封装成一个单独的容器。
2、这样做可以使各种spark组件功能更加的单一化。
3、由于继承了SkinnableComponent,我们可以很容器对其skin进行修改(即使用sparkSkin等方式)
4、可以对任意可视化组件的滚动条样式进行自定义。
通过这样的设定后,看起来的效验与Flex SDK 3一摸一样了。
虽然看似增加了一些代码量(需要加入<s:Scroller>的缘故)但是spark给我们带来了更单一的组件功能封装、更好的扩展性。:)
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()"><fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --></fx:Declarations><fx:Script> <![CDATA[ import mx.controls.Image; import mx.skins.halo.ScrollArrowSkin; import spark.components.Group; import spark.components.Scroller; private function init():void { var sler:Scroller = new Scroller(); //sler.horizontalScrollBar sler.width = 100; sler.height = 100; var group:Group = new Group(); var image:Image = new Image(); image.width = 50; image.height =400; image.source = "../assets/globe.png"; group.addElement(image); group.styleName = "state"; sler.viewport = group; this.addElement(sler); } ]]></fx:Script><!--<s:Scroller width="100" height="100"> <s:Group> <mx:Image width="50" height="400" source="../assets/logo.png')"/> </s:Group> </s:Scroller> --> </s:Application>