在Flex中的spark TextInput中添加搜索图标

Question

我想在spark TextInput控件中添加搜索图标。有没有办法扩展TextInput控件并向其添加子项。

由于

Answer 1

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

Answer 2

我遇到了想要在Spark TextInput中获取搜索图标的相同问题。复制现有的火花皮肤并添加图标非常简单。方法如下：

1. 如果您还没有
，则在工作区中创建一个皮肤文件夹
2. 在FlashBuilder中选择该文件夹，然后右键单击它，然后从出现的菜单中选择New＆gt; MXML皮肤
3. 如果在默认情况下尚未选择，则在显示的窗口中选择“创建为副本”。
4. 在“主机组件”字段中，键入TextInput，您会看到一个选项似乎选择spark.skins.spark.TextInputSkin。
5. 输入组件的名称（例如TextInputSkinWithPromptIcon），然后单击“完成”
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. 就是这样！跑吧......