s:UIComponent 列表未通过自定义 ItemRenderer 很好地呈现

Question

我为 as:list 创建了一个自定义 ItemRenderer，让它包含一个包含 MovieClip 的 UIComponent 列表。当我滚动时，某些项目未显示/渲染，尽管它们的父/x/y 属性是正确的。这是列表的 ItemRenderer 的代码。 render() 在渲染事件被触发时发生：

<?xml version="1.0" encoding="utf-8"?>    
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true" creationComplete="init();" render="render();">

<s:Label id="lbl" text="{data.getName()}" width = "{width}" fontSize="14"/>

<fx:Script>
    <![CDATA[
        import Types.ReversingMovieClip;

        import mx.core.UIComponent;

        private var exDisplay:DisplayObject;
        private var inited:Boolean = false;
        private var uic:UIComponent = new UIComponent();

        public function init():void
        {
            // first item is firing creationComplete twice !
            if (!inited)
            {
                exDisplay = data.getDisplay();
                // Dangerous. if exDisplay has a different event of CLICK, it won't set it here.
                // On the other hand.. this happens at the startup.. so.. what to do.
                if (exDisplay is ReversingMovieClip && !exDisplay.hasEventListener(MouseEvent.CLICK))
                    exDisplay.addEventListener(MouseEvent.CLICK, playPauseClip);
                inited = true;
                addElement(uic);
            }
        }

        public function render():void
        {
            if (exDisplay != null && exDisplay.parent == uic)
                uic.removeChild(exDisplay);

            exDisplay = data.getDisplay();

            //if (exDisplay.width != width && exDisplay.height != width)
                resizeDisplay();

            uic.width = exDisplay.width;
            uic.height = exDisplay.height;


            uic.addChild(exDisplay);


            //ReversingMovieClip.setPlayBySpeed(true);
            //ReversingMovieClip.setSpeed(1);
        }

        private function resizeDisplay():void
        {

            if (exDisplay.width > exDisplay.height)
            {
                exDisplay.width = width;
                exDisplay.scaleY = exDisplay.scaleX;
            }
            else
            {
                exDisplay.height = width;
                exDisplay.scaleX = exDisplay.scaleY;
                exDisplay.x = width / 2 - exDisplay.width / 2;
            }
            uic.y = 12;
            /* trace("listw " + width + "\nexHeight " + exDisplay.height + "exWidth " + 
                exDisplay.width + "\nuicW " + uic.width + " " + uic.height); */

        }

        private function playPauseClip(e:Event):void
        {
            var mc:ReversingMovieClip = (e.currentTarget as ReversingMovieClip);
            if (mc.isPlaying())
                mc.stop();
            else mc.play();
        }
    ]]>
    </fx:Script>

</s:ItemRenderer>

UIComponent 或返回 MovieClip 的 data.getDisplay() 的定位不是问题。 我使用removeChildAt删除该项目使用的最后一个MovieClip，并放置新的。 它有效，只是一些随机项目在滚动时不显示，然后当您再次滚动时，它们会随机出现。

请帮忙..谢谢。

Answer 1

你有很多代码。我将进行更深入的研究，但要点是，当渲染器的数据属性发生变化时，您不会更改组件。因此，渲染器如何知道何时更改其显示的值？

因此，第一个评论是，在 List 组件的初始渲染期间通常会创建单个渲染器。看到创作完成两次火灾并不罕见。

第二条评论是，对于任何初始化代码来说，creationComplete 通常都是一个可怕的地方。阅读 Spark 或 <一个href="http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html" rel="nofollow">光环。如果您想访问组件的子组件，则预初始化事件更好，或者初始化事件更好。

第三，您需要研究并阅读渲染回收。要点是，当您滚动列表时，每个渲染器都会被重复使用。数据发生变化。它不会被再次创建。 List 组件只是传入新数据并期望渲染器知道要做什么。您的“creationComplete”代码很可能需要移至 dataChange 事件处理程序。

第四，您应该利用 Flex 组件生命周期。看起来您的渲染和调整大小显示方法应该移至 updateDisplayList() 中，该方法应该处理子组件的大小调整和定位。

重新编写渲染器将花费相当多的时间；所以我半途放弃了。但是，请仔细阅读我提供的一些链接，尝试一下，如果遇到问题再回来。

Answer 2

你从哪里调用这个？看起来您没有利用组件生命周期来使渲染器数据在数据更改时更新。如果您发布更多代码，那么比“您应该在数据更改时设置一个标志，然后使用 commitProperties、updateDisplaylist 和measure 来反映更改”更容易提供更具体的建议。