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~：