在Flex中添加火花TextInput中的搜索图标

Question

我想在火花TextInput控件中添加搜索图标。有没有一种方法可以扩展TextInput控件并为其添加一个子控件。

感谢

Answer 1

你不应该延长TextInput本身。 Spark架构的主要功能是剥皮的可能性。您可以根据标准TextInputSkin创建自己的皮肤，并在此处放置图标。我认为不会有任何问题。

Answer 2

我面临同样的问题想要在火花TextInput中获得搜索图标。复制现有的spark皮肤并将图标添加到它非常简单。具体方法如下：

1. 在工作区中创建skins文件夹，如果你不已经有一个
2. 选择FlashBuilder该文件夹，然后用鼠标右键单击它，并从显示中选择New> MXML皮肤菜单
3. 在出现的窗口中选择“作为副本创建”（如果默认情况下尚未选中）。
4. 在“主机组件”字段中，键入TextInput，您应该看到一个选项显示为选择spark.skins.spark.TextInputSkin。
5. 为您的组件输入一个名称（例如TextInputSkinWithPromptIcon），然后单击Finish
6. 打开此文件，该文件现在应该出现在您的皮肤文件夹中。

7. 皮肤文件的最后一部分是<!-- text -->。本节过后，创建一个新的节<!-- search icon -->，包括以下（注：这将是在皮肤上一节）：

   <s:Image id="iconDisplay" source="@Embed('path/to/image/file/MY_SEARCH_IMAGE.png')" mouseEnabled="false" mouseChildren="false" visible.normal="false" visible.normalWithPrompt="true"/>

8. 修改早在文件中出现，因此在排除阵列出现如下（注：下面的代码已经存在的文件，只需添加iconDisplay它如图所示）：

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

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

9. 去哪里你有TextInput组件的应用程序代码，并使用它链接到皮肤：<s:TextInput ... skinClass="path.to.skins.TextInputSkinWithPromptIcon" prompt=" "/>

10. 请确保您有包含在第9步的TextInput组件的提示，如图所示。我不想要那里的文字，所以我只是提供了一个空白的提示。你可以使用你想要的任何东西，但是在提示字段中必须有SOMETHING（否则图标不会显示）。
11. 就是这样！运行它...