Flex的数字控件

Flex 4中，常用的有四种数字控件，Flex 4 Spark类型、原来Flex 3 Halo类型的各两种，分别是：

1. NumericStepper - Spark
2. Spinner - Spark
3. HSlider - Halo
4. VSlider - Halo

当然Halo类型的Slider在Spark类型包中，也有对应物，但Spark中的对应物比较“原始”，主要用于定制控件时使用，属于可“skinned”的，要自己定义刻度、标签等。

来看代码：

 xmlns:fx="" 
              xmlns:s="library://ns.adobe.com/flex/spark" 
              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
              fontFamily="微软雅黑" fontSize="12">
   
       
   
   
        
           import mx.controls.Alert;
           public function showMsg(msg:String):void
           {
               Alert.show(msg);
           }
       ]]>
   
    title="演示" left="10" top="10">
       
           
       
        paddingBottom="10" paddingLeft="10" paddingRight="10"
                 paddingTop="10">
            fontWeight="bold" text="你有几个孩子？"/>
            id="kids"
                             minimum="0" 
                             maximum="10"
                             stepSize="1"
                             change="showMsg(kids.value.toString())"/>
           
                fontWeight="bold" text="几个在读大学？"/> 
                minimum="0" maximum="10" id="collegeKids"/>
                text="{collegeKids.value}个在读大学。"/> 
           
            fontWeight="bold" text="你乘车上下班要几分钟？"/>
            id="commuteTimeRange" minimum="0" maximum="180" 
                       snapInterval="5"
                       tickInterval="15"
                       labels="[0 mins,180 mins]"
                       thumbCount="2" 
                       change="showMsg(commuteTimeRange.values.toString())">
           

            fontWeight="bold" text="你有多高？"/>
            id="yourHeight" minimum="0" maximum="300"
                       tickInterval="50" snapInterval="1"
                       labels="[0,50,100,150,200,250,300]"
                       change="showMsg(yourHeight.values.toString())"/>
       
   

运行结果如下：

Slider控件属性说明：

snapInterval：移动滑块时滑块的增值

tickInterval：刻度线相对于控件maximum值的间距

labels="[0 mins,180 mins]"：滑块标签

thumbCount：Slider控件所允许的滑块数量，可能的值为 1 或 2。

commuteTimeRange.values.toString中的values：thumbCount 大于 1 时，每个滑块的值构成的数组。