Flex中修改Slider中Thrmb滑块大小的方法

开发的游戏中，用到两个Hslider，其中要修改外观，特别是修改Thrmb，以下是设置其大小的方法：

 

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>

方式二、自訂 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;
  }
 }
}

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}"