滑块控件（Slider Control）的使用

最新推荐文章于 2026-05-10 16:00:00 发布

最新推荐文章于 2026-05-10 16:00:00 发布 · 2.5k 阅读

标签

#Adobe #XML

Flex3 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了滑块控件的主要属性，包括labels、minimum、maximum、tickInterval、snapInterval等，并提供了如何利用滑块控件改变图片大小的范例，讨论了showDataTip和liveDragging功能，以及如何自定义数据提示格式。

一、控件主要属性

1、labels：控件的起点和终点标签。

2、minimum：可选择的最小值

3、maximum：可选择的最大值。

4、tickInterval：相邻坐标之间的距离值。

5、snapInterval：数值增加的步长。

6、allowTrackClick：是否允许在单击滑轨时滑块移到被单击的地方。

7、showDataTip：是否显示滑块所指的数值。

8、value：滑块所指的数值。

9、liveDragging：值为true，在用户拖动滑块时，不断地发生change事件，为false时，只有当滑块停止拖动时，才发生change事件。

10、dataTipFormatFunction：指定自定义函数，格式化showDataTip显示的数值。

二、范例

通过Slider控件来改变图片的大小。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.formatters.NumberBase;
			import mx.events.SliderEvent;
			
			private var w:Number = 150;
			private var h:Number = 100;
			
			private function sliderChange(event: SliderEvent):void{
				var n:Number = slider1.value;
				img1.width = w + n;
				img1.height = h + n;
			}
			
			private function formatFunc(value:Number):String {
	          	return value.toFixed(0).toString();
	      	}
		]]>
	</mx:Script>
	
	<mx:HSlider x="10" y="10" width="303" 
		id="slider1"
		labels="[1,100]"
		minimum="1"
		maximum="100"
		tickInterval="10"
		snapInterval="1"
		allowTrackClick="true"
		showDataTip="true"
		liveDragging="true"
		dataTipFormatFunction="formatFunc"
		change="sliderChange(event)"
		/>
		
	<mx:Image x="10" y="63" id="img1" source="images/img.jpeg" width="150" height="100"/>
	
</mx:Application>