如何在 Advanced DataGridItem Renderer 中设置悬停颜色？

Question

我正在尝试使用 MXAdvancedDataGridItemRenderer 为 AdvancedDataGrid 创建项目渲染器。

当我将示例自定义项呈现器 (MXAdvancedDataGridItemRenderer) 附加到 AdvancedDataGrid 中的分层数据时，项呈现器无法正确呈现单元格。 如果自定义渲染器也未选中，它只会呈现为悬停（突出显示）状态。当该行被选中并悬停时，自定义项渲染器只会将单元格呈现为选中状态。

如何让自定义渲染器识别在突出显示行时应该突出显示的内容？

下图显示了一个例子。第一行被选中，鼠标悬停在第二个单元格上。如您所见，单元格呈现为“选定”而不是“悬停”。

这是一个示例应用程序：

<?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" 
               minWidth="955" minHeight="600">

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

            [Bindable]
            public var data:ArrayCollection = new ArrayCollection([
                {label:"Fruit", children:[
                    {label:"Apple", price:1.5},
                    {label:"Banana", price:2},
                    {label:"Orange", price:1.75}]},
                {label:"Drink", children:[
                    {label:"Water", price:0.5},
                    {label:"Milk", price:2.25},
                    {label:"Juice", price:1.25}]}
                ]);
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <mx:AdvancedDataGrid x="10" y="10" width="350" height="200" itemRenderer="TestItemRenderer">
        <mx:dataProvider>
            <mx:HierarchicalData source="{data}"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="Name" dataField="label"/>
            <mx:AdvancedDataGridColumn headerText="Price" dataField="price"/>
        </mx:columns>
    </mx:AdvancedDataGrid>

</s:Application>

这是 MXAdvancedDataGridItemRenderer 的示例：

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true">

    <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}" />

</s:MXAdvancedDataGridItemRenderer>

Answer 1

您可能想尝试将添加 autoDrawBackground="false" 到您的 MXAdvancedDataGridItemRenderer。我在为 ADG 使用“单个单元格”选择模式时遇到问题，这解决了问题。

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true"
                                  autoDrawBackground="false">

  <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}" />

</s:MXAdvancedDataGridItemRenderer>

Answer 2

试试这个（注意rollOverColor）：

<mx:AdvancedDataGrid x="10" y="10" width="350" height="200" rollOverColor="0xff0000" itemRenderer="TestItemRenderer">
        <mx:dataProvider>
            <mx:HierarchicalData source="{data}"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="Name" dataField="label"/>
            <mx:AdvancedDataGridColumn headerText="Price" dataField="price"/>
        </mx:columns>
    </mx:AdvancedDataGrid>

干杯， 抢

Answer 3

您也可以通过为 AdvancedDataGrid 设置“样式”来实现此目的

AdvancedDataGrid {
textRollOverColor: #000000;
textSelectedColor: #FFFFFF;
disabledColor: #8E8E8E;
borderColor: #454545;
alternatingItemColors: #FFFFFF, #FCFCFC;
verticalGridLineColor: #F6F6F6;
color: #000000;
selectionColor: #A0B3BE;
rollOverColor: #DBE4E6;
borderStyle: none;
borderThickness: 0;
fontSize: 12;
headerColors: #DBE4E6, #DBE4E6;
selectionDisabledColor: #FFFFFF;

}