Flex 滚动条外观

发布时间：2020-12-15 04:08:49 所属栏目：百科来源：网络整理

导读：Flex4.5 滚动条组件Scroller显示一个称为视域的单个可滚动组件，以及水平滚动条和垂直滚动条。其皮肤中包含了水平与垂直的皮肤。 s:HScrollBar id="horizontalScrollBar" visible="false" skinClass="Skins.ScrollerSkin.AppHScrollBarSkin" /s:VScrollBar i

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 : 指定舞台上当前的水平滚动位置.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!