Datagrid 中的 Itemrenderer 显示错误

Question

我有一个带有 itemrenderer 组件的数据网格。 itemrenderer 中有一个按钮，应显示在数据网格的每隔一行中。 编译后是这样的。

当我滚动数据网格时，按钮显示不正确，为什么？

图像链接

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

    [Bindable]
    private var _ac:ArrayCollection = new ArrayCollection();

    private function applicationComplete(e:FlexEvent):void{
        for (var i:Number = 0; i < 100; i++ ) {
            var b:Boolean = (i % 2) ? true : false;
            _ac.addItem({text:'foo' + i, showBtn:b});
        }
    }

    ]]>
</fx:Script>

<mx:DataGrid id="datagrid" dataProvider="{_ac}" width="200">
    <mx:columns>
        <mx:DataGridColumn headerText="Text" dataField="text" />
        <mx:DataGridColumn headerText="Edit" >
            <mx:itemRenderer>
                <fx:Component>
                    <mx:Canvas>
                        <fx:Script>
                            <![CDATA[
                            override public function set data(value:Object):void {
                                super.data = value;
                                if(value != null){
                                    if (data.showBtn == false) editBtn.visible = false; 
                                }   
                            }
                            ]]>
                        </fx:Script>
                        <s:Button id="editBtn" label="edit" />
                    </mx:Canvas>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>

</mx:DataGrid>

Answer 1

由于渲染器在滚动时会被重用，因此您需要将其切换回可见状态。

更改

if (data.showBtn == false) editBtn.visible = false;

为

if (data.showBtn == false){
   editBtn.visible = false;
}else{ 
   editBtn.visible = true; 
 }

或者简单地使用以下语法：

editBtn.visible = (data.showBtn as Boolean);