actionscript-3 - 使用项目渲染器时延迟打开组合框

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

希望有帮助！