3

Flex 4 / AS3：我通过选择 New->MXML Skin 并选择“TextInput - spark.components”作为主机组件为 TextInput 制作了自定义皮肤。因此，我的出发点是“Spark TextInput 组件的默认皮肤类”。

在新皮肤（称为“textinput_skin”）中，我添加了一个新的视觉元素，我希望它出现在文本输入中文本的左侧。

“按钮形状”应该看起来非常像这样： http: //www.adobe.com/content/dotcom/en/devnet/flex/articles/flex4_skinning/_jcr_content/articlecontentAdobe/image_2.adimg.mw.125.jpg /1279877300467.jpg （因为我复制了从 Adob​​e 示例中绘制它的代码）。

相反，在我的 TextInput 中，它看起来像这样：http: //i.imgur.com/8aWE7HB.png

这是我在自定义 TextInput 皮肤中的代码（现在大部分是新的，但我添加了新的视觉元素）：

<!-- border - NOT NEW STUFF --> 
<!--- @private -->
<s:Rect left="0" right="0" top="0" bottom="0" id="border">
    <s:stroke>     
        <!--- @private -->
        <s:SolidColorStroke id="borderStroke" weight="1" />
    </s:stroke>
</s:Rect>

<!-- fill - NOT NEW STUFF -->
<!--- Defines the appearance of the TextInput component's background. -->
<s:Rect id="background" left="1" right="1" top="1" bottom="1">
    <s:fill>
        <!--- @private Defines the background fill color. -->
        <s:SolidColor id="bgFill" color="0xFFFFFF" />
    </s:fill>
</s:Rect>

<!-- shadow - NOT NEW STUFF -->
<!--- @private -->
<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:Group> <!-- NEW PART: group with horizontal layout, to get graphical element to the left of the text in the text input -->
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>

    <s:Group> <!-- a second group that defines the 'image' shape and interior text (looks like a green rect with rounded corners and text inside)'
        <!-- border and fill -->
        <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
            <s:fill>
                <s:SolidColor color="0x77CC22"/>
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="0x131313" weight="2"/>
            </s:stroke>
        </s:Rect>

        <!-- highlight on top -->
        <s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" height="50%">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF" alpha=".5"/>
                    <s:GradientEntry color="0xFFFFFF" alpha=".1"/>
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <!-- text -->
        <s:Label text="txt" color="0xFFFFFF" 
                 textAlign="center"
                 verticalAlign="middle"
                 horizontalCenter="0" verticalCenter="1"
                 left="6" right="6" top="6" bottom="6" 
                 />
    </s:Group>

    <!-- text - NOT NEW STUFF - the normal textDisplay element for the Text Input -->
    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:RichEditableText id="textDisplay"
                        verticalAlign="middle"
                        widthInChars="10"
                        left="1" right="1" top="1" bottom="1" />
</s:Group>

<!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
<s:Label id="promptDisplay" maxDisplayedLines="1"
            verticalAlign="middle"
            mouseEnabled="false" mouseChildren="false"
            includeIn="normalWithPrompt,disabledWithPrompt" 
            includeInLayout="false"
            />

我使用皮肤，如下所示：

<s:TextInput skinClass="model.textinput_skin" fontFamily="Arial" id="textinputid" name="item3" visible="true" editable="true" />

问题是图形元素变暗了。看起来它可能有一个 alpha < 1，或者前面有另一个透明项目。正如您在代码中看到的那样，我将文本颜色设置为 0xFFFFFF，但它显然比白色更暗。

谁能帮我确定是什么让我的元素变暗？

顺便说一句，我知道有“影子”元素。但在 updateDisplayList() 中，只有当borderVisible == true 时才会设置阴影。我尝试设置borderVisible = false，并尝试从皮肤中完全移除阴影元素。这似乎不是问题。

此外，有一次我使用图像而不是以编程方式绘制形状。连图像都变暗了。

非常感谢。

4

1 回答 1

4

我找到了答案。

皮肤的其他地方是这段代码：

<fx:Script fb:purpose="styling">
    <![CDATA[
    import mx.core.FlexVersion;

    private var paddingChanged:Boolean;

    /* Define the skin elements that should not be colorized. */
    static private const exclusions:Array = ["background", "textDisplay", "promptDisplay", "border"];

    /* exclusions before Flex 4.5 for backwards-compatibility purposes */
    static private const exclusions_4_0:Array = ["background", "textDisplay", "promptDisplay"];
... etc.

我需要将我的新元素添加到排除数组中，使其成为“不应着色的皮肤元素”之一。我不知道为什么，但这解决了它。

新代码：

<fx:Script fb:purpose="styling">
    <![CDATA[
    import mx.core.FlexVersion;

    private var paddingChanged:Boolean;

    /* Define the skin elements that should not be colorized. */
    static private const exclusions:Array = ["text_img", "background", "textDisplay", "promptDisplay", "border"];

    /* exclusions before Flex 4.5 for backwards-compatibility purposes */
    static private const exclusions_4_0:Array = ["text_img", "background", "textDisplay", "promptDisplay"];

其中 text_img 是我绘制图形元素的组的 id。

于 2013-02-20T13:20:22.993 回答