在做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}" />