Flex Spark Textinput不同的组件宽度和内部文本宽度

Question

我正在尝试更改在 spark Textinput 组件内显示的文本的像素长度。 在 mx Textinput 上，我会覆盖 updateDisplayList 并修改 textField 宽度，但在这里我无法提出类似的解决方案。

有什么想法吗？

谢谢，

Answer 1

您可以为 Spark TextInput 创建自定义外观。

它可能看起来像这样（默认 TextInputSkin 的副本）：

<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" 
    alpha.disabledStates="0.5" blendMode="normal">

    <fx:Metadata>
    <![CDATA[ 

        [HostComponent("spark.components.TextInput")]
    ]]>
    </fx:Metadata> 

    <fx:Script>
        <![CDATA[
            ...
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="normalWithPrompt"/>
        <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
    </s:states>

    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
        <s:stroke>     
            <s:SolidColorStroke id="borderStroke" weight="1" />
        </s:stroke>
    </s:Rect>

    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>

    <s:Rect left="1" top="1" right="1" height="1" id="shadow">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>

    <s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />

    <s:Label id="promptDisplay" maxDisplayedLines="1"
                verticalAlign="middle"
                mouseEnabled="false" mouseChildren="false"
                includeIn="normalWithPrompt,disabledWithPrompt" 
                includeInLayout="false"
                />

在那里您可以看到一个名为 textDisplay 的 RichEditableText - 这是 TextInput 中的实际文本输入字段。你可以按照你想要的方式放置它。