滚动时,Spark 4中的Flex 4 ItemRenderer Ghosting问题

时间:2011-07-07 13:44:50

标签: list flex flex4 itemrenderer flex-spark

我在列表中有一个项目渲染器,当我尝试使用覆盖方法设置列表项时我想要它们是不可见的。

当我尝试使用该功能进行设置时,每次滚动使用渲染器的列表时,都会开始出现严重的重绘问题。

当我结合使用这两种方法时,标签会正确地重绘,但是当我滚动时,图像会自动上下折叠。

以下是代码:

http://pastebin.com/FkjRBT3G

请感谢您给予的任何帮助。

编辑最新代码

    <?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" creationComplete="setupControls();"  autoDrawBackground="true" contentBackgroundAlpha="1.0" contentBackgroundColor="#000000">

    <fx:Script>
        <![CDATA[
            import flash.display.*;
            import flash.ui.ContextMenu;
            import flash.ui.ContextMenuBuiltInItems;
            import flash.ui.ContextMenuItem;

            import mx.controls.Alert;
            import mx.core.FlexGlobals;

        /*  override public function set data(value:Object):void{
                if(value != null)  {
                    super.data = value;
                    theLabel.text = value.UserName;
                    if (value.IsGroup == true){
                        imgGroup.visible=true;
                        theLabel.x = 24;
                        theLabel.setStyle("fontWeight", "bold")
                    }

                    if (value.IsGroup  == false){
                        imgUser.visible=true;
                        theLabel.x = 34;
                    }
                }
            }  */

        private function setupControls():void{
                    theLabel.text = data.UserName;
                    theLabel.y = 4;
                    if (data.IsGroup == 'true'){
                        imgGroup.visible=true;
                        theLabel.x = 24;
                        theLabel.setStyle("fontWeight", "bold")
                    }

                    if (data.IsGroup  == 'false'){
                        imgUser.visible=true;
                        theLabel.x = 34;
                    }

                    var availableFieldMenu:ContextMenu = new ContextMenu();
                    var chartSubTypeFieldMenu:ContextMenuItem = new ContextMenuItem("Add, Edit, Delete",false,true,true);
                    availableFieldMenu.customItems.push(chartSubTypeFieldMenu);
                    chartSubTypeFieldMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemHandler);
                    availableFieldMenu.hideBuiltInItems();
                    this.contextMenu = availableFieldMenu;
                }   


        public function menuItemHandler(event:ContextMenuEvent) : void{
            if (event.currentTarget.caption=="Add, Edit, Delete"){
                Alert.show('Right Click Just Happened!');
            }
        }




        ]]>
    </fx:Script>


    <s:Label y="4" id="theLabel" color="#000000"/><mx:Image id="imgGroup" source="@Embed(source='file:/D:/Work/RapidReport/Images/nd0071-16.png')"  width="16" height="16" x="3" visible="false" buttonMode="true"/><mx:Image id="imgUser" source="@Embed(source='file:/D:/Work/RapidReport/Images/nd0032-48.png')" width="16" height="16" x="13" visible="false"/>

</s:ItemRenderer>

此致 克雷格

5 个答案:

答案 0 :(得分:1)

我通过关闭使用虚拟布局来修复它,上下文菜单实际上工作得很好;)

它自己的列表使用{}

绑定到xml列表

答案 1 :(得分:0)

您无法在项呈示器中使用上下文菜单。

如果不立即需要,为什么要在创作完成时创建所有这些内容?不要使用创建完成事件,这种东西有新功能(为了更好的回收),比如'准备'。从我所看到的,你不需要整个创作的完整功能。

数据集功能不需要Bindable。

这是经过清理的未经测试的版本:

<?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">

    <fx:Script>
        <![CDATA[
            import flash.display.*;
            import flash.ui.ContextMenu;
            import flash.ui.ContextMenuBuiltInItems;
            import flash.ui.ContextMenuItem;

            import mx.controls.Alert;
            import mx.core.FlexGlobals;

          override public function set data(value:Object):void
          {
                super.data = value;
                label.text = value.UserName;

                if (value.IsGroup)
                {
                    currentState = 'group';
                }else{
                    currentState = 'user';
                }
            }  

            private function onMenu():void
            {
                // TODO: add code to add the menu.  
                // Can't use right click to do this as right click is only for 
                // context menu on top level component. should create 'menu' button
            }  
        ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout gap="0" />
    </s:layout>
    <s:states>
        <s:State name="group" />
        <s:State name="user" />
    </s:states>
    <mx:Image width="16" height="16" buttonMode="true" includeIn="group"
        source="@Embed(source='file:/D:/Work/RapidReport/Images/nd0071-16.png')"  />
    <mx:Image width="16" height="16" includeIn="user"
        source="@Embed(source='file:/D:/Work/RapidReport/Images/nd0032-48.png')" />
    <s:Label id="label" color="#000000" fontWeight.group="bold"/>
</s:ItemRenderer>

您还应该发布数据提供者/列表的创建和更新方式,因为我确定还有其他问题。

答案 2 :(得分:0)

setupControls现在可能是多余的,在这个例子中,useVirtualLayout可以为true:

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
    <![CDATA[
        import flash.display.*;
        import flash.ui.ContextMenu;
        import flash.ui.ContextMenuBuiltInItems;
        import flash.ui.ContextMenuItem;

        import mx.controls.Alert;
        import mx.core.FlexGlobals;

        [Bindable] public var TheState:String=''; 

        override public function set data(value:Object):void{

            if(value != null)  {
                super.data = value;
                if (value.IsGroup == true){
                    TheState = 'group';
                    currentState = 'group';
                    //theLabel.x = 24;
                    //theLabel.setStyle("fontWeight", "bold")
                }

                if (value.IsGroup  == false){
                    TheState  = 'user';
                    currentState = 'user';
                    //theLabel.x = 34;
                }
            }
            //super.invalidateDisplayList();
        }  

        private function setupControls():void{  
            if (String(data.IsGroup)=='true'){

                TheState='group';
            }else {
                TheState='user';
            }
            //Alert.show('' + TheState);
            if (TheState  == 'group'){
                currentState = 'group';
            }

            if (TheState == 'user'){
                currentState = 'user';              
            }   
        }   

        override public function set currentState(value:String):void
        {
            super.currentState = value;

            //if (value != 'normal' && value != 'hovered' && value != 'selected')
            //{
                this.TheState = TheState;
            //}
        }

        override protected function getCurrentRendererState():String
        {
            var state:String = super.getCurrentRendererState();

            state = TheState;
            return state;
        }


    ]]>
</fx:Script>
<s:states>
    <s:State name="default" basedOn="{TheState}" />
    <s:State name="normal" basedOn="{TheState}" />
    <s:State name="hovered" basedOn="{TheState}" />
    <s:State name="selected" basedOn="{TheState}" /> 
    <s:State name="up" basedOn="{TheState}"/>
    <s:State name="over" basedOn="{TheState}"/>
    <s:State name="down" basedOn="{TheState}"/>
    <s:State name="disabled" basedOn="{TheState}"/>  

    <s:State name="user" />
    <s:State name="group" />

</s:states>


<s:Label y="4" x="34" id="theUserLabel" text="{data.UserName}" color="#000000" includeIn="user"/><s:Label text="{data.UserName}"  y="4" x="24" id="theGroupLabel" color="#000000" includeIn="group" fontWeight="bold"/><mx:Image id="imgGroup" source="@Embed(source='file:/D:/Work/RapidReport/Images/nd0071-16.png')"  width="16" height="16" x="3" visible="true" buttonMode="true" includeIn="group"/><mx:Image id="imgUser" source="@Embed(source='file:/D:/Work/RapidReport/Images/nd0032-48.png')" width="16" height="16" x="13" visible="true" includeIn="user"/>

答案 3 :(得分:0)

我遇到了同样的问题,并通过以下方式修复:

将我的数据分解为属性并按属性将属性传递给渲染器,因此删除了重写的数据函数,使用每个数据属性的setter(从数据中分解(提取))。

答案 4 :(得分:0)

问题相当陈旧,但似乎问题仍然存在于Flex 4.13中。 我正在努力解决同样的问题而且我会覆盖数据设置器。 我用来解决这个问题的两种方法:

  1. 使用mx:Label而不是Spark的标签
  2. 删除虚拟布局,以防已知列表非常小并且大部分可见
  3. 另外,我注意到这个问题发生在Spark的DataGrid以及List