Question

我试图想出一种方法来改善组合框的性能，并在其中使用项目渲染。当我使用没有自定义项目渲染器的组合框时，下拉菜单会快速打开，组合框响应很快。当我添加一个简单的项目渲染器时，它现在需要一秒钟才打开组合框。就像它创建所有孩子然后缓存它们一样。之后，组合框打开正常，直到您选择一个项目。然后打开组合框也需要一段时间。

以下是演示此问题的示例应用程序：

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            height="100%" width="100%" xmlns:local="*"
    >
<mx:Script><![CDATA[
    import mx.collections.ArrayCollection;

    public var dataProvider:ArrayCollection = new ArrayCollection(
               [{label:"test1"}, 
                {label:"test2"}, 
                {label:"test3"}]);

    ]]></mx:Script>

<!-- combobox with item renderer, this has a delay when opening -->

<mx:ComboBox width="200"
             dataProvider="{dataProvider}">
    <mx:itemRenderer>
        <mx:Component>
            <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
                <mx:Label text="'item renderer' + {data.label}"/>
            </mx:HBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:ComboBox>

<!-- default combobox, this works fine -->

<mx:ComboBox width="200"
             dataProvider="{dataProvider}"/>
</mx:Application>

我在这里缺少什么？这似乎不应该发生。

Answer 1

在花了一些时间试图找到解决方案后，我发现如果在<mx:Component>中只定义了一个“干净”的子组件，性能会好得多。

因此以下表现良好：

<mx:Component>
    <mx:HBox /> ( "clean" )
</mx:Component>

这个表现不佳（延迟）：

<mx:Component>
    <mx:HBox>
        <mx:Label /> ( not "clean" )
    </mx:HBox>
</mx:Component>

要解决此问题，我们可以使用代码创建子组件：

<mx:itemRenderer>
    <mx:Component>
        <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
                <![CDATA[
                    import mx.controls.Label;

                    // Define the label instance
                    private var lbl:Label = new Label();

                    // Add the label as a child component
                    override protected function createChildren(): void {
                        super.createChildren();
                        addChild( lbl );
                    }

                    // Set the data
                    override public function set data( value:Object ): void {
                        super.data = value;
                        if ( value ) {
                            lbl.text = value.label;
                        }
                    }
                ]]>
            </mx:Script>
        </mx:HBox>
    </mx:Component>
</mx:itemRenderer>

演示：https://github.com/jeantimex/flex-combobox-itemrenderer

希望有所帮助！

Answer 2

这可能是朝着正确方向迈出的一步;但我无法保证解决方案。我建议你先重新编写itemRenderer，不要使用绑定。通过教他们，我已经为付费客户解决了很多内存泄漏问题。绑定也是itemRenderers中性能繁重的操作;所以我建议将其从操作中删除。

我没有在itemRenderer中使用Binding，而是更喜欢响应dataChange方法。

我还建议您从itemRenderer中删除HBox;因为您应该能够按原样使用标签：

<mx:ComboBox width="200"
             dataProvider="{dataProvider}">
    <mx:itemRenderer>
        <mx:Component>
            <mx:Label dataChange="onDataChange(event)">
              <mx:Script>
                 protected function onDataChange(event:Event):void{
                    this.text='item renderer' + data.label;
                 }
              </mx:Script>
            </mx:Label>
        </mx:Component>
    </mx:itemRenderer>
</mx:ComboBox>

我不确定这是否会解决任何性能问题。在创建Flextras AutoComplete时，我必须完成Flex ComboBox的许多奇怪之处。

内存告诉我，每次下拉关闭时，在Flex 3.4（以及之前）;它被破坏了 - 基本上没有缓存在内存中。这在Flex 3.5中发生了变化，而他们开始缓存它并重新使用相同的下拉对象。我想知道你认为的表现问题是否与某种方式有关。

编辑1：基于对该职位的投诉不解决根本问题;我根据原始海报代码和我建议的更改将this test case放在一起。我建议的改变确实解决了原始海报所带来的问题。以下是样本背后的来源：

    [Bindable]
    public var dataProvider:ArrayCollection = new ArrayCollection(
        [{label:"test1"}, 
            {label:"test2"}, 
            {label:"test3"}]);

]]></mx:Script>

<!-- combobox with item renderer, this has a delay when opening -->

<mx:VBox>

<!-- ComboBox provided by original poster -->
<mx:ComboBox width="200"
             dataProvider="{dataProvider}">
    <mx:itemRenderer>
        <mx:Component>
            <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
                <mx:Label text="'item renderer' + {data.label}"/>
            </mx:HBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:ComboBox>


<!-- ComboBox with rewritten itemRenderer; which does not exhibit the problem -->
<mx:ComboBox width="200"
             dataProvider="{dataProvider}">
    <mx:itemRenderer>
        <mx:Component>
            <mx:Label dataChange="label1_dataChangeHandler(event)">
                <mx:Script>
                    <![CDATA[
                        import mx.events.FlexEvent;

                        protected function label1_dataChangeHandler(event:FlexEvent):void
                        {
                            this.text = "item renderer" + data.label;
                        }

                    ]]>
                </mx:Script>
            </mx:Label>
        </mx:Component>
    </mx:itemRenderer>
</mx:ComboBox>


<!-- default combobox, this works fine -->

<mx:ComboBox width="200"
             dataProvider="{dataProvider}"/>
</mx:VBox>

编辑2： devshorts说如果我们将组件创建为独立的itemRenderer，我的代码将不起作用;但我不明白为什么不。

以下是独立itemRenderer的代码，名为com.flextras.listRenderers.CustomLabelRenderer：

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" dataChange="label1_dataChangeHandler(event)">

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function label1_dataChangeHandler(event:FlexEvent):void
            {
                this.text = "item renderer" + data.label;
            }

        ]]>
    </mx:Script>    
</mx:Label>

以下是一些代码，可以添加到上面的邮件应用程序中进行测试：

<!-- ComboBox, like above with the itemRenderer as a separate component -->
    <mx:ComboBox width="200"
             dataProvider="{dataProvider}" itemRenderer="com.flextras.listRenderers.CustomLabelRenderer" />

我更新了application at my provided link以包含这个新的ComboBox实例;它现在是名单上的第3位。

使用项呈示器时延迟打开组合框

2 个答案: