在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. 就是這樣！運行它...