Flex 滚动条外观

最新推荐文章于 2024-07-02 11:33:04 发布

Qiustion

最新推荐文章于 2024-07-02 11:33:04 发布

阅读量1k

点赞数

分类专栏： Flex4

本文链接：https://blog.csdn.net/Qiustion/article/details/10227911

版权

Flex4 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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