如果列包含自定义 UIComponent，则 Flex DataGrid 无法正确排序

Question

我有一个 DataGrid，第一列是字符串（“Red”、“Blue”等），第二列是相应颜色的圆圈（自定义 UIComponent）。如果我单击第一列进行排序，所有颜色的名称都可以很好地排序，但第二列中的那些圆圈的顺序完全错误。有人知道下面的代码出了什么问题吗？

这是应用程序 mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:components="components.*"
               minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var myArray:ArrayCollection = new ArrayCollection([
                { name:"Red",    color:0xff0000 },
                { name:"Orange", color:0xff8000 },
                { name:"Yellow", color:0xffff00 },
                { name:"Green",  color:0x00ff00 },
                { name:"Blue",   color:0x0000ff },
                { name:"Purple", color:0xff00ff }
            ]);
        ]]>
    </fx:Script>

    <s:DataGrid dataProvider="{myArray}">
        <s:columns>
            <s:ArrayCollection>
                <s:GridColumn dataField="name"/>
                <s:GridColumn dataField="color">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:VGroup>
                                    <components:Circle color="{data.color}" />
                                </s:VGroup>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
            </s:ArrayCollection>
        </s:columns>
    </s:DataGrid>
</s:Application>

这是自定义的 UIComponent：

package components
{
    import mx.core.UIComponent;

    public class Circle extends UIComponent
    {
        public var color:uint;

        public function Circle()
        {
            super();
            height = 20;
            width = 20;
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledWidth);
            graphics.clear();
            graphics.beginFill(color, 1);
            graphics.drawCircle(10, 10, 8);
            graphics.endFill();
        }
    }
}

Answer 1

您的自定义组件可能根本没有重绘。最简单的解决方案是根本不使用自定义组件，而是使用 FXG 图形来绘制您的圆圈。

用这个替换你的 itemrenderer，它应该可以正常工作：

<s:GridItemRenderer>
     <s:Ellipse width="20" height="20">
         <s:fill>
              <s:SolidColor color="{data.color}" />
         </s:fill>
     </s:Ellipse>
</s:GridItemRenderer>

也就是说，我会将标签和颜色样本放在一列（而不是两列），因为它们代表相同的数据。