Flex TextInput 控件：搜索样式渲染答案

【问题标题】：Flex TextInput Control: Search Style renderingFlex TextInput 控件：搜索样式渲染
【发布时间】：2010-11-06 17:27:51
【问题描述】：

我有一个 TextInput 控件，它具有系统中人员的搜索功能。它工作正常。我所需要的只是以这样的方式设置它的样式，它将在右侧具有搜索图像，单击该图像时将进行搜索。它实际上是应用程序的外观部分，这将使搜索框看起来更好。

这与嵌入在 Firefox 中的搜索框实现的行为完全相同。

有什么解决办法吗？

谢谢:)

【问题讨论】：

在 Flex 4 Spark TextInput 中，您可以将 skinClass 设置为您自己的自定义 TextInputSkin。在皮肤中，您可以使用基本布局将搜索图标图像放置在您想要的位置。在这种情况下，将图标锚定到右边缘并将 labelDisplay 宽度设置为 100%。然后在 labelDisplay 中添加额外的 paddingRight 以防止文本与图标重叠。

标签： apache-flex flex3 textinput

【解决方案1】：

确认，避免子类化。跳出框框思考，使用画布：

<mx:Canvas>
    <mx:TextInput change="doSearchFor(event.currentTarget.text)" />
    <mx:Image source="search_icon.png" verticalCenter="0" right="5" />
</mx:Canvas>

如果你想让它更整洁，那就让它本身成为一个组件。在 MXML 中和在其他地方一样，优先考虑组合而不是继承。

【讨论】：

【解决方案2】：

<mx:HBox>
    <mx:TextInput id     = "txtSearch"/>
    <mx:Image source     = "yourSearchIcon.png" 
              click      = "doSearch()" 
              buttonMode = "true"/>
</mx:HBox>

就是这样！

【讨论】：

这就是我现在拥有的...我需要嵌入/包含在搜索文本输入本身中的图像，并且需要摆脱搜索按钮
' 会尝试但是，我们不能渲染 textinput 控件以在文本框中的特定位置添加图像吗？
@online19 - 您需要继承 TextInput 对象，并且 1) 在 TextInput 子类的 UITextField 中包含和定位图像； 2）包含代码以将其保存在正确的位置。如果我明天早上有时间，我会看看我是否能想出一个可发布的答案。
@rhtx - 你有没有尝试过这个？我还没有尝试过。整个星期都很忙。 '将尝试这个并发布它如果它有效

【解决方案3】：

您可以编写一个 TextInput 类的子类，它具有“yourSearchIcon”图像的图像，例如：

[Embed(source='../../libs/graphic_elements.swf#search_ico')]
private var searchIcon:Class;
private var searchImg:Image = new Image();

private function onCreationComplete(event:Event) : void {
    searchImg.source = searchIcon;
    searchImg.x = this.width - 40;
    this.addChild(searchImg);
    this.addEventListener(ResizeEvent.RESIZE, onResize);
}

显然你必须处理调整大小事件

private function onResize(event:ResizeEvent) : void {
        searchImg.x = event.currentTarget.width - 40;

    }

这是你的自定义组件

【讨论】：

【解决方案4】：

希望此代码对您有所帮助。此代码在TextInput 的左侧添加了一个搜索图标。

public class SearchInputBox extends TextInput
{

[Embed(source='../../../../assets/images/icons/searchIcon.png')]
private var searchIcon:Class;   
private var searchImg:Image;        

override protected function createChildren():void
{
        super.createChildren();
        searchImg = new Image();
        searchImg.source = searchIcon;
        searchImg.width=15;
        searchImg.height=15;
        searchImg.x = 2;
        searchImg.y = 3;

        setStyle("paddingLeft",searchImg.width+2);
        addChild(searchImg);

}
}

【讨论】：