AS3 / Flex自定义TextInput组件填充

Question

我尝试创建一个自定义TextInput组件，其中包含标签，标签旁边有实际输入框。如下图所示（Photoshop Slice）：
我大部分时间都在工作。但是，当文本到达框的末尾时，它会一直到边框（完全忽略填充），然后当输入更多字符时，它会将文本的左侧向上推到{{1} } label（再次，忽略填充）。正如您在此图中所见（Flex屏幕截图）：

除了改变滚动条的外观之外，这是我已经完成的第一个自定义组件和皮肤，而且我已经在它上面敲了一天。我知道这可能很容易，但我无法弄清楚。如果有人能告诉我如何正确地做到这一点，我将非常感激...

我的代码到目前为止看起来像......

com.controls.LabeledTextInput.as：

USERNAME

com.controls.skins.LabeledTextInputSkin.mxml：

package com.controls
{
    import flash.events.FocusEvent;
    import spark.components.TextInput;
    import spark.core.IDisplayText;
    import mx.core.FlexGlobals;
    import mx.styles.CSSStyleDeclaration;

    //--------------------------------------
    //  Styles
    //--------------------------------------

    /**
     *  The alpha of the border for this component.
     */
    [Style(name="focusBorderAlpha", type="Number", inherit="no", theme="spark", minValue="0.0", maxValue="1.0")]

    /**
     *  The color of the border for this component.
     */
    [Style(name="focusBorderColor", type="uint", format="Color", inherit="no", theme="spark")]

    /**
     *  Controls the visibility of the border for this component.
     */
    [Style(name="focusBorderVisible", type="Boolean", inherit="no", theme="spark, mobile")]

    /**
     *  Shorthand padding around the textDisplay subcomponent.
     *  This property works like the CSS padding style. Eg.
     *  padding: 2 4 2 4    (top right bottom left)
     *  padding: 2 4 2      (top right/left bottom)
     *  padding: 2 4        (top/bottom right/left)
     *  padding: 2          (top/right/bottom/left)
     */
    [Style(name="padding", type="String", inherit="no", theme="spark")]

    /**
     *  Padding around the labelDisplay subcomponent.
     *  This property works like the CSS padding style. Eg.
     *  padding: 2 4 2 4    (top right bottom left)
     *  padding: 2 4 2      (top right/left bottom)
     *  padding: 2 4        (top/bottom right/left)
     *  padding: 2          (top/right/bottom/left)
     */
    [Style(name="labelPadding", type="String", inherit="no", theme="spark")]

    //--------------------------------------
    //  Skin states
    //--------------------------------------

    /**
     *  Focus State of the TextInput
     */
    [SkinState("focused")]

    public class LabeledTextInput extends TextInput
    {
        [SkinPart(required="false")]

        /**
         *  A skin part that defines the label of the input. 
         */
        public var labelDisplay:IDisplayText;

        /**
         *  Var for storing the label.
         */
        private var _label:String;

        /**
         *  Keeps track of our focus state.
         */
        private var inFocus:Boolean;

        /**
         *  Used for setting default property values.
         */
        private static var classConstructed:Boolean = classConstruct();

        // Set default style values
        private static function classConstruct() : Boolean
        {
            if (!FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("com.controls.LabeledTextInput"))
            {
                var labeledTextInputStyles:CSSStyleDeclaration = new CSSStyleDeclaration();
                labeledTextInputStyles.defaultFactory = function() : void
                {
                    this.focusBorderAlpha = 1;
                    this.focusBorderColor = 0xE2E2D9;
                    this.focusBorderVisible = true;
                    this.paddingTop = NaN;
                    this.paddingRight = NaN;
                    this.paddingBottom = NaN;
                    this.paddingLeft = NaN;
                    this.padding = null;
                    this.labelPadding = null;
                }
                FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration("com.controls.LabeledTextInput", labeledTextInputStyles, true);
            }
            return true;
        }       

        public function LabeledTextInput()
        {
            super();
        }

        [Bindable]
        public function get label() : String
        {
            return _label;
        }

        public function set label(value:String) : void
        {
            if(_label != value)
            {
                _label = value;
                if(labelDisplay != null)
                {
                    labelDisplay.text = value;
                }
            }
        }

        /* Implement the getCurrentSkinState() method to set the view state of the skin class. */
        override protected function getCurrentSkinState() : String
        {
            return (inFocus == true) ? "focused" : super.getCurrentSkinState();
        } 

        /* Set the label and attach focus even handlers. */ 
        override protected function partAdded(partName:String, instance:Object) : void
        {
            super.partAdded(partName, instance);

            if (instance == labelDisplay)
            {
                labelDisplay.text = label;
            }
            else if(instance == textDisplay)
            {
                textDisplay.addEventListener(FocusEvent.FOCUS_IN, onFocusInHandler);
                textDisplay.addEventListener(FocusEvent.FOCUS_OUT, onFocusOutHandler);
            }
        }

        /* Remove the focus event handlers. */
        override protected function partRemoved(partName:String, instance:Object) : void
        {
            super.partRemoved(partName, instance);

            if(instance == textDisplay)
            {
                textDisplay.removeEventListener(FocusEvent.FOCUS_IN, onFocusInHandler);
                textDisplay.removeEventListener(FocusEvent.FOCUS_OUT, onFocusOutHandler);
            }
        }

        /* Handler for FocusIn Event */
        private function onFocusInHandler(event:FocusEvent) : void
        {
            inFocus = true;
            invalidateSkinState();
        }

        /* Handler for FocusOut */
        private function onFocusOutHandler(event:FocusEvent) : void
        {
            inFocus = false;
            invalidateSkinState();
        }
    }
}

Answer 1

在skinClass中...在label和editableText之间增加“gap”值...然后检查......