Question

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

这与Firefox中嵌入的搜索框中实现的完全相似。

对此有任何解决方案吗？

谢谢：）

Answer 1

确认，避免继承。在Box之外思考，并使用Canvas：

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

如果你想让它更整洁，那就把它作为一个组件。赞成组合而不是继承，在MXML和其他地方一样。

Answer 2

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

这就是全部！

Answer 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);
}

显然你必须处理resize事件

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

    }

那是你的自定义组件

Answer 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);

}
}

Flex TextInput Control：搜索样式呈现

4 个答案: