设置NumericStepper组件每次点击调节的步长.

时间:2021-10-14 22:07:01
stepSize 属性的学习.
示例:

代码:
<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white" >

    
< mx:ApplicationControlBar  dock ="true" >
        
< mx:Form  styleName ="plain" >
            
< mx:FormItem  label ="stepSize:" >
                
< mx:HSlider  id ="slider"
                        minimum
="1"
                        maximum
="10"
                        value
="1"
                        snapInterval
="1"
                        tickInterval
="1"
                        liveDragging
="true"   />
            
</ mx:FormItem >
        
</ mx:Form >
    
</ mx:ApplicationControlBar >

    
< mx:NumericStepper  id ="numericStepper"
            minimum
="0"
            maximum
="100"
            stepSize
=" {slider.value} "   />

</ mx:Application >

也可以通过自定义组件来完成:
comps/MyComp.as文件
/**
 * http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/
 */
package comps {
    import mx.containers.ApplicationControlBar;
    import mx.containers.Canvas;
    import mx.containers.Form;
    import mx.containers.FormItem;
    import mx.controls.HSlider;
    import mx.controls.NumericStepper;
    import mx.core.Application;
    import mx.events.SliderEvent;

    public class MyComp extends Canvas {
        public var appControlBar:ApplicationControlBar;
        public var form:Form;
        public var formItem:FormItem;
        public var slider:HSlider;
        public var numericStepper:NumericStepper;

        public function MyComp() {
            super();
            init();
        }

        public function init():void {
            slider = new HSlider();
            slider.minimum = 1;
            slider.maximum = 10;
            slider.value = 1;
            slider.snapInterval = 1;
            slider.tickInterval = 1;
            slider.liveDragging = true;
            slider.addEventListener(SliderEvent.CHANGE, slider_change);

            formItem = new FormItem();
            formItem.label = "stepSize:";
            formItem.addChild(slider);

            form = new Form();
            form.styleName = "plain";
            form.addChild(formItem);

            appControlBar = new ApplicationControlBar();
            appControlBar.dock = true;
            appControlBar.addChild(form);

            Application.application.addChildAt(appControlBar, 0);

            numericStepper = new NumericStepper();
            numericStepper.minimum = 0;
            numericStepper.maximum = 100;
            addChild(numericStepper);
        }

        private function slider_change(evt:SliderEvent):void {
            numericStepper.stepSize = evt.value;
        }
    }

mxml文件:
<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        xmlns:comps
="comps.*"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white" >

    
< comps:MyComp  id ="myComp"   />

</ mx:Application >

来自: http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/