apache-flex - 在 Flex 列表/数据网格中设置前景和背景选择颜色的样式

Question

Flex 公开了一个“selectionColor”CSS 属性，用于设置选定列表/数据网格的背景 颜色。但是，我不知道如何设置所选列表的前景或文本 颜色的样式。看来您只能更改所有行的前景色。

因此，例如，我想要一个非常深的选择背景颜色和一个非常浅的取消选择背景颜色。同样，您可能希望选择的文本颜色为浅色，取消选择的文本颜色为深色。

我知道我可以使用自定义项目渲染器来做到这一点，但这似乎很愚蠢。重点是在我的应用程序中设置所有列表/数据网格的样式。我不想为每个使用它的地方设置自定义项渲染器或扩展 Datagrid。请注意，我正在使用 Flex 4 并愿意使用皮肤，尽管我不知道这是否意味着考虑到 DataGrid 尚未被激活。

Answer 1

Flex 3 使用了 textRollOverColor 和 textSelectedColor 但 Flex 4 组件不再支持它们。

以下示例演示了所有这些 + 为 Spark 列表添加了对这种颜色的支持:

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

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        global
        {
            textRollOverColor: yellow;
            textSelectedColor: green;
        }

    </fx:Style>

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

        private function getListDataProvider():ArrayCollection
        {
            return new ArrayCollection([ "Item 1", "Item 2", "Item 3"]);
        }

        private function getGridDataProvider():ArrayCollection
        {
            return new ArrayCollection([ { name: "Item 1" }, { name: "Item 2" }, { name: "Item 3" } ]);
        }

    ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>

    <s:List dataProvider="{getListDataProvider()}"/>

    <s:List dataProvider="{getListDataProvider()}" itemRenderer="ColoredItemRenderer"/>

    <mx:List dataProvider="{getListDataProvider()}"/>

    <mx:DataGrid dataProvider="{getGridDataProvider()}"/>

</s:Application>

ColoredItemRenderer:

<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" 
    autoDrawBackground="true">

    <fx:Script>
    <![CDATA[

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            var color:uint;
            if (selected)
                color = getStyle("textSelectedColor");
            else if (hovered)
                color = getStyle("textRollOverColor");
            else
                color = getStyle("color");
            sparkLabel.setStyle("color", color);
        }

    ]]>
    </fx:Script>

    <s:Label id="sparkLabel" text="{data}"/>

</s:ItemRenderer>