ItemRenderer对象更改属性

时间:2013-01-04 22:14:17

标签: actionscript-3 flex flex-spark

道歉的标题道歉。我想不出一个更好的方式用很少的话说出来。

基本上,我正在创建一个自定义ItemRenderer(IR)。 IR在左侧有一个标签,在右侧有一个图标。右侧的图标是动态的(可以是添加或删除图标,也可以不是任何内容)。这很好用,让我能够控制它。

现在,问题是当我在移动应用程序中滚动列表时,图标会发生变化。

应该如何看待: enter image description here

通过拖动Test3,使用手指(或模拟器中的鼠标)滚动后的效果: enter image description here

如您所见,图标会更改,但标签不会更改。我的Spark List组件上的dragEnableddropEnableddragMoveEnabled都设置为false。图标选择运行的唯一时间是creationComplete,因此在某些时候无法选择不同的图标。我还可以验证数据本身是发生此更改后应该是什么。

以下是创建项目的MXML:

<s:HGroup width="100%" verticalAlign="middle" left="{this.sideSpacing}" right="{this.sideSpacing}" top="{this.sideSpacing}" bottom="{this.sideSpacing}">
    <s:Label id="text" width="100%"/>

    <s:Image id="actionIcon" buttonMode="true" click="actionIconClick( event );">
        <s:filters>
            <s:DropShadowFilter alpha=".45" angle="90" distance="3" blurX="3" blurY="3" quality="3"/>
        </s:filters>
    </s:Image>
</s:HGroup>

<s:Rect width="100%" height="1" bottom="0" alpha=".1">
    <s:fill>
        <s:SolidColor color="#000000"/>
    </s:fill>
</s:Rect>

可能过于精细的AS3用于选择应显示哪个图标:

private function creationComplete( e:Event ):void {
    if ( this.data.actionIcon != null ) {
        this.actionIconType = this.data.actionIcon;
        if ( this.data.actionIcon == ACTION_ICON_ADD ) {
            this.actionIcon.source = this.addBitmapSource;
        }
        else if ( this.data.actionIcon == ACTION_ICON_REMOVE ) {
            this.actionIcon.source = this.removeBitmapSource;
        }
        else {
            this.actionIcon.source = null;
            this.actionIcon.visible = false;
            this.actionIcon.includeInLayout = false;
        }
    }
    else {
        this.actionIcon.source = null;
        this.actionIcon.visible = false;
        this.actionIcon.includeInLayout = false;
    }
}

可能导致此问题的原因是什么?

1 个答案:

答案 0 :(得分:3)

基本上,您需要在触发dataChange事件时更新渲染器的标签和图标。 CreationComplete只被触发一次。该列表并未真正滚动,只是itemRenderer中的数据发生了变化;使它看起来像滚动的东西。我把这个渲染器称为回收。

以下是我为移动应用创建的组件,可以执行您想要的操作。它显示一个标签和一个图标(装饰者的AKA)。滚动时,标签和图标都会更新。您可以使用非常类似的方法。

<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    dataChange="onDataChange(event)" alpha=".7" width="100%" cacheAsBitmap="true">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import com.dotcomit.magondaMaze.managers.BoardDataManager;
            import com.dotcomit.magondaMaze.managers.StatManager;

            import mx.events.FlexEvent;

            [Embed(source="assets/images/chooseLevel/completed78x78.png")]
            private var completedImage:Class;                               

            public var statManager :StatManager = StatManager.instance;     


            protected function onDataChange(event:FlexEvent):void
            {
                var itemAsXML :XML = data as XML;
                var results :String = itemAsXML.@id + '. ' + itemAsXML.@title;
                label = results;
                if( statManager.isBoardComplete(itemAsXML.@id)){
                    this.decorator = completedImage;
                } else {
                    this.decorator = null;
                }
            }
        ]]>
    </fx:Script>
</s:IconItemRenderer>

我还要补充一点,IconItemRenderer组件 - 我上面的代码扩展 - 旨在完全满足您的需求。因此,您可能不必重新编写方向盘。