修改VSlider的thumb的大小

来源：互联网发布：网络录像机安装教程编辑：程序博客网时间：2024/06/05 18:22

在做flex的时候使用slider 总是觉得太大，网上查了资料呵呵感觉不错因为 slider 的 thumb 继承于 button 所以我们可以引用很多的特性。如需要修改 Thumb Skin
發現不管怎樣改 Skin，Thumb 都只有 12 x 12 大小
Flex API 上也沒有提供可以設定的 CSS Style 屬性
以下分享個人修改 Slider Thumb 大小的做法

方式一、待 Slider 建立完成後，取出 Thumb 加以設定

Main.mxml：

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="middle"> <mx:HSlider>  <mx:creationComplete>   <![CDATA[    import mx.controls.HSlider;    import mx.core.UIComponent;    var slider:HSlider = event.target as HSlider;    var thumb:UIComponent = slider.getThumbAt(0);    thumb.width = 24;    thumb.height = 24;    slider.invalidateDisplayList();   ]]>  </mx:creationComplete> </mx:HSlider></mx:Application><!-- Ticore's Blog - http://ticore.blogspot.com/ -->

方式二、自訂 SliderThumb Class，覆寫 measure 方法

MySliderThumb Class：

package { import mx.controls.sliderClasses.*;  public class MySliderThumb extends SliderThumb {  override protected function measure():void{   super.measure();   measuredWidth = 24;   measuredHeight = 24;  } }}// Ticore's Blog - http://ticore.blogspot.com/

Main.mxml：

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="middle"> <mx:HSlider sliderThumbClass="{MySliderThumb}" />