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

最新推荐文章于 2025-02-13 14:38:49 发布

原创最新推荐文章于 2025-02-13 14:38:49 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #application #encoding #import #class #layout

Flex 专栏收录该内容

19 篇文章

订阅专栏

本文介绍两种修改HSlider中Thumb尺寸的方法：一是通过脚本在HSlider创建完成后直接修改Thumb的宽高；二是自定义SliderThumb类并重写measure方法。

开发的游戏中，用到两个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}"