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

【问题标题】：Add search icon inside spark TextInput in Flex在 Flex 中的 spark TextInput 中添加搜索图标
【发布时间】：2011-08-23 05:42:10
【问题描述】：

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

谢谢

【问题讨论】：

标签： apache-flex actionscript textinput

【解决方案1】：

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

【讨论】：

没有这个就很难使用 Flex 5。

【解决方案2】：

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

如果您还没有 skins 文件夹，请在您的工作区中创建一个文件夹
在 FlashBuilder 中选择该文件夹，然后右键单击它，然后从出现的菜单中选择新建 > MXML 皮肤
如果默认情况下尚未选择，请在出现的窗口中选择“创建为副本”。
在 Host Component 字段中，键入 TextInput，您应该会看到一个选择 spark.skins.spark.TextInputSkin 的选项。
为您的组件输入一个名称（例如 TextInputSkinWithPromptIcon），然后单击“完成”
打开这个文件，它现在应该出现在你的皮肤文件夹中。
皮肤文件的最后一个部分是。在此部分之后，为  创建一个新部分，其中包括以下内容（注意：这将是皮肤中的最后一个部分）：

<s:Image id="iconDisplay" source="@Embed('path/to/image/file/MY_SEARCH_IMAGE.png')" mouseEnabled="false" mouseChildren="false" visible.normal="false" visible.normalWithPrompt="true"/>
修改文件中较早出现的排除数组，使其如下所示（注意：文件中已经存在以下代码，只需添加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",];
转到您拥有 TextInput 组件的应用程序代码，并使用以下命令将其链接到皮肤：<s:TextInput ... skinClass="path.to.skins.TextInputSkinWithPromptIcon" prompt=" "/>
确保在步骤 9 中的 TextInput 组件中包含提示，如图所示。我不想要文本，所以我只是包含了一个空格的提示。你可以使用任何你想要的东西，但提示字段中必须有 SOMETHING（否则图标不会显示）。
就是这样！运行它...

【讨论】：