Flex TextInput 控件：搜索样式渲染

Posted 2023-04-18

【中文标题】Flex TextInput 控件：搜索样式渲染

【英文标题】：Flex TextInput Control: Search Style rendering

【发布时间】：2010-11-06 17:27:51

【问题描述】：

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

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

有什么解决办法吗？

谢谢:)

【问题讨论】：

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

【参考方案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);