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

时间:2012-10-07 23:32:30

标签: flex size textinput flex-spark

我正在尝试更改INSIDE一个spark Textinput组件中显示的文本的像素长度。 在mx Textinput上,我会覆盖updateDisplayList和修改的textField宽度,但我不能在这里提出类似的解决方案。

有什么想法吗?

谢谢,

1 个答案:

答案 0 :(得分: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中的实际文本输入字段。你可以按照自己想要的方式定位它。