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