actionscript-3 - 在 Flex 中仅显示 Numeric Stepper 的文本字段

Question

Flex中是否有Numeric Stepper的任何属性可用于仅显示Numeric Stepper的文本字段并隐藏箭头按钮？我需要在鼠标滚动时显示完整的数字步进器。

Answer 1

在 flex 4 中创建具有新状态的自定义皮肤：结束。创建新类 NumericStepperExtends 扩展 NumericStepper，监听翻转和滚动事件，并更改皮肤状态。NumericStepperExtends：

package classes
{
    import flash.events.MouseEvent;

    import spark.components.NumericStepper;

    public class NumericStepperExtends extends NumericStepper
    {

        private var _over:Boolean = false;

        public function NumericStepperExtends()
        {
            super();
        }

        override protected function createChildren():void
        {
            super.createChildren();

            addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true);
            addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true);
        }

        override protected function getCurrentSkinState():String
        {
            if (_over) return "over";

            return super.getCurrentSkinState();
        }

        protected function onRollOutHandler(event:MouseEvent):void
        {
            _over = false;

            invalidateSkinState();
        }

        protected function onRollOverHandler(event:MouseEvent):void
        {
            _over = true;

            invalidateSkinState();
        }
    }
}

皮肤：

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minHeight="23" minWidth="40" 
      alpha.disabled="0.5">

    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.NumericStepper")]
    ]]>
    </fx:Metadata> 

    <fx:Script fb:purpose="styling">
        static private const exclusions:Array = ["textDisplay", "decrementButton", "incrementButton"];

        /**
         * @private
         */  
        override public function get colorizeExclusions():Array {return exclusions;}

        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }

        private var cornerRadiusChanged:Boolean;
        private var borderStylesChanged:Boolean;

        /**
         *  @private
         */
        override protected function commitProperties():void
        {
            super.commitProperties();

            if (cornerRadiusChanged)
            {
                var cr:Number = getStyle("cornerRadius");
                if (incrementButton)
                    incrementButton.setStyle("cornerRadius", cr);
                if (decrementButton)
                    decrementButton.setStyle("cornerRadius", cr);
                cornerRadiusChanged = false;
            }

            if (borderStylesChanged)
            {
                textDisplay.setStyle("borderAlpha", getStyle("borderAlpha"));
                textDisplay.setStyle("borderColor", getStyle("borderColor"));
                textDisplay.setStyle("borderVisible", getStyle("borderVisible"));
                borderStylesChanged = false;
            }
        }

        /**
         *  @private
         */
        override public function styleChanged(styleProp:String):void
        {
            var allStyles:Boolean = !styleProp || styleProp == "styleName";

            super.styleChanged(styleProp);

            if (allStyles || styleProp == "cornerRadius")
            {
                cornerRadiusChanged = true;
                invalidateProperties();
            }

            if (allStyles || styleProp.indexOf("border") == 0)
            {
                borderStylesChanged = true;
                invalidateProperties();
            }
        }
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="over" />
    </s:states>

    <s:Button id="incrementButton" right="0" top="0" height="50%" tabEnabled="false"
              includeInLayout.normal="false" visible.normal="false" includeInLayout.over="true"
              skinClass="spark.skins.spark.NumericStepperIncrementButtonSkin" />

    <s:Button id="decrementButton" right="0" bottom="0" height="50%" tabEnabled="false" 
              includeInLayout.normal="false" visible.normal="false" includeInLayout.over="true"
              skinClass="spark.skins.spark.NumericStepperDecrementButtonSkin" />

    <s:TextInput id="textDisplay" left="0" top="0" right="18" bottom="0"
        skinClass="spark.skins.spark.NumericStepperTextInputSkin" />

</s:SparkSkin>

不要忘记为绑定新组件和新皮肤添加 css：

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    @namespace classes "classes.*";

    classes|NumericStepperExtends
    {
        skinClass: ClassReference("skins.NumericStepper");
    }


</fx:Style>

Answer 2

你可以创建一个蒙版（这里是教程），当鼠标没有结束时应用什么。

所以你必须：1）创建一个遮罩对象，2）遮罩步进器（stepper.mask = mymask）3）将翻转和滚动监听器添加到遮罩，您可以在其中设置或移除遮罩。

Answer 3

您可以尝试一个非常简单的方法：使用 mx_internal：

var n : NumericStepper = new NumericStepper();
n.mx_internal::nextButton.visible = false;
n.mx_internal::prevButton.visible = false;