FLEX类似谷歌地图拖拽功能

要实现类似于谷歌地图拖拽功能，可以用s:Scroller标签来实现，代码如下：

mxml:

 <s:Scroller width="100%" height="100%" interactionMode="touch" skinClass="skins.ScrollerSkin">

                 <s:Group>

         <component:Diagram id="diagram">

         </component:Diagram></s:Group>

             </s:Scroller>

其中的component:Diagram为自己定义的组件，只需替换成你要放置的东西就OK.

皮肤文件 -->

1.ScrollerSkin.mxml:

 <?xml version="1.0" encoding="utf-8"?>

 <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">

     <fx:Metadata>

     <![CDATA[

         /**

          * @copy spark.skins.spark.ApplicationSkin#hostComponent

          */

         [HostComponent("spark.components.Scroller")]

     ]]>

     </fx:Metadata>

     <fx:Script>

     <![CDATA[

     import skins.*;

         /**

          *  @private

          */

         override public function beginHighlightBitmapCapture() : Boolean

         {

             var needUpdate:Boolean = super.beginHighlightBitmapCapture();

             // Draw an opaque rect that fill our entire skin. Our background

             // is transparent, but we don't want focus/error skins to

             // poke through.  This is safe to do since we don't have any

             // graphic elements as direct children.

             graphics.beginFill(0);

             graphics.drawRect(0, 0, width, height);

             graphics.endFill();

             return needUpdate;

         }

         /**

          *  @private

          */

         override public function endHighlightBitmapCapture() : Boolean

         {

             var needUpdate:Boolean = super.endHighlightBitmapCapture();

             // Clear the rect we drew in beginBitmapCapture();

             graphics.clear();

             return needUpdate;

         }

     ]]>

     </fx:Script>

     <s:VScrollBar id="verticalScrollBar" visible="false" skinClass="skins.VScrollerSkin"/>

     <s:HScrollBar id="horizontalScrollBar" visible="false" skinClass="skins.HScrollBarSkin"/>

 </s:SparkSkin>

2.VScrollerSkin.mxml:

<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="15" minHeight="15"

    alpha.disabled="0.5" alpha.inactive="0.5" >

    <fx:Script>

        <![CDATA[

    import skins.ScrollerBarTrackSkin;

    import skins.ScrollerThumbSkin;

        ]]>

    </fx:Script>

    <fx:Metadata>

    <![CDATA[

        /**

         * @copy spark.skins.spark.ApplicationSkin#hostComponent

         */

        [HostComponent("spark.components.VScrollBar")]

    ]]>

    </fx:Metadata>

    <s:states>

        <s:State name="normal" />

        <s:State name="disabled" />

        <s:State name="inactive" />

    </s:states>

    <s:Button id="track" top="1" bottom="1" width="10"

              focusEnabled="false" tabEnabled="false"

              skinClass="skins.ScrollerBarTrackSkin" />

    <s:Button id="thumb"

              skinClass="skins.ScrollerThumbSkin" mouseEnabled="false"

              focusEnabled="false" visible.inactive="false" tabEnabled="false"/>

</s:SparkSkin>

3.HScrollBarSkin.mxml:

 <?xml version="1.0" encoding="utf-8"?>

 <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

     xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="35" minHeight="15"

     alpha.disabled="0.5" alpha.inactive="0.5">

     <fx:Script>

         <![CDATA[

     import skins.ScrollerBarTrackSkin;

     import skins.ScrollerThumbSkin;

         ]]>

     </fx:Script>

     <fx:Metadata>

     <![CDATA[

         /**

          * @copy spark.skins.spark.ApplicationSkin#hostComponent

          */

         [HostComponent("spark.components.HScrollBar")]

     ]]>

     </fx:Metadata>

     <s:states>

         <s:State name="normal" />

         <s:State name="disabled" />

         <s:State name="inactive" />

     </s:states>

     <s:Button id="track" left="1" right="1" width="10"

               focusEnabled="false" tabEnabled="false"

               skinClass="skins.ScrollerBarTrackSkin" />

     <s:Button id="thumb"

               focusEnabled="false" visible.inactive="false" tabEnabled="false" mouseEnabled="false"

               skinClass="skins.ScrollerThumbSkin" />

 </s:SparkSkin>

4.ScrollerBarTrackSkin.mxml:

 <?xml version="1.0" encoding="utf-8"?>

 <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark"

              xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

              minWidth="10" minHeight="10"

              alpha.disabled="0.5">

     <fx:Metadata>

         <![CDATA[

         /**

          * @copy spark.skins.spark.ApplicationSkin#hostComponent

          */

         [HostComponent("spark.components.Button")]

         ]]>

     </fx:Metadata>

     <s:states>

         <s:State name="up" />

         <s:State name="over" />

         <s:State name="down" />

         <s:State name="disabled" />

     </s:states>

     <s:Rect top="0" bottom="0" left="0" right="0" minWidth="10" minHeight="10">

     </s:Rect>

 </s:SparkButtonSkin>

5.ScrollerThumbSkin.mxml:

 <?xml version="1.0" encoding="utf-8"?>

 <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark"

              xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

              minWidth="10" minHeight="10"

              alpha.disabled="0.5">

     <fx:Metadata>

         <![CDATA[

         /**

          * @copy spark.skins.spark.ApplicationSkin#hostComponent

          */

         [HostComponent("spark.components.Button")]

         ]]>

     </fx:Metadata>

     <s:states>

         <s:State name="up" />

         <s:State name="over" />

         <s:State name="down" />

         <s:State name="disabled" />

     </s:states>

     <s:Rect top="1" left="1" right="1" bottom="1" radiusX="5" radiusY="5">

         <s:fill>

             <s:SolidColor color="0xC0C0C0" alpha="0.8"/>

         </s:fill>

     </s:Rect>

 </s:SparkButtonSkin>

效果见下图，当内容超过s:Scroller大小，并且只有拖拽的时候才会出现这个滚动条， 标签自带的拖到头部或尾部还会有弹性，就像谷歌地图的效果那样   O(∩_∩)O~：