在Flex列表/数据网格中设置前景和背景选择颜色的样式 [英] Styling both foreground and background selection color in a Flex list/datagrid

问题描述

Flex暴露了一个selectionColorCSS属性，用于为所选列表/数据网格的背景颜色创建样式。但是，我不知道如何设置选定列表的前景或文本颜色。看起来你只能改变所有行的前景色。所以，例如，我想要一个非常黑暗的选择背景颜色和非常轻的取消选择的背景颜色。您同样需要一个浅色文本颜色的选择和一个黑色的文字颜色取消选择。

我知道我可以做一个自定义的项目渲染器，但这似乎相当愚蠢。重点是在我的应用程序中设置所有列表/ datagrids。我不想为每个使用它的地方设置自定义项目渲染器或扩展Datagrid。请注意，我正在使用Flex 4，并且愿意使用皮肤，尽管我不知道这是否意味着任何考虑DataGrid的东西还没有被激活。

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 slibrary：//ns.adobe.com/flex/spark; 
 @namespace mxlibrary：//ns.adobe.com/flex/mx; 
 
全球
 {
 textRollOverColor：yellow; 
 textSelectedColor：green; 
} 
 
< / fx：样式> 
 
< fx：Script> 
<！[CDATA [
 import mx.collections.ArrayCollection; 
 
 private function getListDataProvider（）：ArrayCollection 
 {
 return new ArrayCollection（[Item 1，Item 2，Item 3]）; 
 
 $ b私有函数getGridDataProvider（）：ArrayCollection 
 {
 return new ArrayCollection（[{name：Item 1}，{name：Item 2 }，{name：Item 3}]）; 
} 
 
]]> 
< / fx：Script> 
 
< s：layout> 
 < / s：layout> 
 
< s：List dataProvider ={getListDataProvider（）}/> 
 
  
< mx：List dataProvider ={getListDataProvider（）}/> 
 
  
< / 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 [
 
覆盖保护函数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：ItemRenderer> 
  

Flex exposes a "selectionColor" CSS property for styling the background color of a selected list/datagrid. However, I cannot figure out how to style the foreground or text color of selected list. It appears you can only change the foreground color for all rows.

So, for example, that I wanted a very dark selection background color and a very light deselected background color. You would similarly want a light text color for selection and a dark text color for deselected.

I know I could do this with a custom item renderer, but that seems rather silly. The point is to style all lists/datagrids in my app. I don't want to have to set a custom item renderer or extend Datagrid for each place I use it. Note that I am using Flex 4 and am willing to use skins though I don't know if that means anything considering DataGrid is not sparkified yet.

解决方案

Flex 3 used textRollOverColor and textSelectedColor but Flex 4 components does not support them anymore.

The following example demonstrates all this + adding support for this colors for spark List:

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

这篇关于在Flex列表/数据网格中设置前景和背景选择颜色的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！