Flex 滚动条外观

Flex4.5 滚动条组件Scroller显示一个称为视域的单个可滚动组件，以及水平滚动条和垂直滚动条。其皮肤中包含了水平与垂直的皮肤。

<s:HScrollBar id="horizontalScrollBar" visible="false" skinClass="Skins.ScrollerSkin.AppHScrollBarSkin" />
<s:VScrollBar id="verticalScrollBar" visible="false" skinClass="Skins.ScrollerSkin.AppVScrollBarSkin" />

水平(垂直)滚动条皮肤包含有四个组成部分: track轨道, thumb滑块, decrementButton消耗键, incrementButton增加键，其中decrementButton和incrementButton可以去掉，即是不要左右方向的按钮。 AppHScrollBarSkin.mxml内容:

<s:SparkSkin ...>
    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.HScrollBar")]
    ]]>
    </fx:Metadata> 

    ...

    <s:Button id="track" left="0" right="0" width="54" top="-2"
              focusEnabled="false" tabEnabled="false"
              skinClass="Skins.ScrollerSkin.AppHSBarTrackSkin" />

    <s:Button id="thumb" visible="true" top="0" 
              focusEnabled="false" visible.inactive="false" tabEnabled="false"
              skinClass="Skins.ScrollerSkin.AppHSBarThumbSkin" />

</s:SparkSkin>

track ,thumb都是Button组件，皮肤都是由Button皮肤组成的
AppHSBarTrackSkin.mxml内容：

<s:SparkSkin ...>
<fx:Metadata>
<![CDATA[ 
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata> 
...
<s:Rect top="1" left="0" right="0" bottom="0" radiusX="5" radiusY="5" minWidth="14" minHeight="12">
<s:fill>
<s:SolidColor/>
</s:fill>
</s:Rect>
<s:Rect left="0" right="0" top="0" bottom="0" minWidth="14" minHeight="12" radiusX="5" radiusY="5" >
<s:fill>
<s:SolidColor/>
</s:fill>
</s:Rect>
<s:Rect top="3" right="0" left="0" bottom="0" alpha="0.3" radiusX="5" radiusY="5" minWidth="14" minHeight="12">
<s:fill>
<s:SolidColor color="#FFFFFF"/>
</s:fill>
</s:Rect>
<s:Rect top="2" right="0" left="0" bottom="1" minWidth="14" minHeight="12" radiusX="5" radiusY="5">
<s:fill>
<s:SolidColor color="#1E1E1E"/>
</s:fill>
</s:Rect>

</s:SparkSkin>

AppHSBarThumbSkin.mxml内容：

<s:SparkSkin ...>
   ...
   <s:Rect left="0" right="0" top="0" bottom="0" minWidth="13" minHeight="12" radiusX="5" radiusY="5">
      <s:fill>
<s:LinearGradient scaleX="11" rotation="90">
  <s:GradientEntry ratio="0" color="#D5F387"/>
  <s:GradientEntry ratio="0.611601" color="#91B353"/>
  <s:GradientEntry ratio="1" color="#6C9137"/>
</s:LinearGradient>
      </s:fill>
</s:Rect>
</s:SparkSkin>

Track与Thumb的位置问题可以在AppHScrollBarSkin.mxml外观文件上修改.

通过样式中应用此外观:

<fx:Style>
     @namespace s "library://ns.adobe.com/flex/spark";
     @namespace mx "library://ns.adobe.com/flex/mx";
     s|HScrollBar{
skinClass:ClassReference("Skins.ScrollerSkin.AppHScrollBarSkin");
      }
</fx:Style>

对于mx|HScrollBar主题的方法如下：

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

mx|HScrollBar{
    downArrowSkin:ClassReference("null");
    upArrowSkin:ClassReference("null");  --屏蔽掉按钮
    trackSkin:ClassReference("skins.ScrollSkins.AppHSBarTrackSkin");
    thumbSkin:ClassReference("skins.ScrollSkins.AppHSBarThumbSkin");
    } </fx:Style>

另记： horizontalScrollPolicy : 指示水平滚动条是启用方式off, auto, on;
horizontalScrollPosition : 指定舞台上当前的水平滚动位置.

秒客网

Flex 滚动条外观

相关文章