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

Question

Flex公开一个“selectionColor”CSS属性，用于设置选定列表/数据网格的颜色背景。但是，我无法弄清楚如何设计选定列表的颜色的前景或文字。看起来你只能改变所有行的前景色。

所以，例如，我想要一个非常黑暗的选择背景颜色和非常轻的取消选择的背景颜色。您同样需要选择浅色文字和取消选择深色文字颜色。

我知道我可以用自定义项目渲染器来做到这一点，但这似乎相当愚蠢。重点是在我的应用程序中设置所有列表/数据网格。我不想为每个使用它的地方设置自定义项目渲染器或扩展Datagrid。请注意，我使用的是Flex 4，并且愿意使用皮肤，但我不知道这是否意味着考虑DataGrid的任何事情都还没有实现。

Answer 1

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

下面的例子演示了所有该颜色的火花名单这个+添加支持：

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

Answer 2

这里是如何做到这一点的Flex 4的使用状态的例子和itemRenders

<s:List itemRenderer="com.renderer.GlossaryRenderer" change="handleGridClick(event)" width="293" height="206" styleName="glossaryList" dataProvider="{_glossary}"> 
    <s:layout> 
     <s:VerticalLayout horizontalAlign="justify" paddingLeft="5" requestedRowCount="9" /> 
    </s:layout> 
</s:List> 

你可以设置你的项目渲染呃这样

<?xml version="1.0" encoding="utf-8"?> 
<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="false"> 
<s:states> 
    <s:State name="normal" /> 
    <s:State name="hovered" /> 
    <s:State name="selected" /> 
</s:states> 
<s:Label id="sparkLabel" backgroundColor.selected="#ff0000" color.selected="#FFFFFF" color.hovered="#FFFFFF" text="{data.word}" left="2" right="2" top="4" bottom="4" /> 
</s:ItemRenderer> 

Answer 3

火花的DataGrid，你需要创建一个基于GridItemRenderer一个新的项目渲染器。然后将其分配给DataGrid itemRenderer属性。

MyGridItemRender.mxml：

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      width="100%" 
      height="100%"> 

    <fx:Script> 
     <![CDATA[ 

      override public function prepare(hasBeenRecycled:Boolean):void { 
       super.prepare(hasBeenRecycled); 

       var styleClient:IStyleClient = owner as IStyleClient; 
       var color:uint; 

       if (selected && styleClient.getStyle("textSelectionColor")!==undefined) { 
        color = styleClient.getStyle("textSelectionColor"); 
       } 
       else if (selected && styleClient.getStyle("textSelectedColor")!==undefined) { 
        color = styleClient.getStyle("textSelectedColor"); 
       } 
       else if (hovered && styleClient.getStyle("textRollOverColor")!==undefined) { 
        color = styleClient.getStyle("textRollOverColor"); 
       } 
       else { 
        color = styleClient.getStyle("color"); 
       } 

       labelDisplay.setStyle("color", color); 
      } 

     ]]> 
    </fx:Script> 

    <s:Label id="labelDisplay" 
      paddingLeft="3" paddingRight="3" 
      paddingTop="5" paddingBottom="5" 
      verticalCenter="2" 
      left="2"/> 

</s:GridItemRenderer> 

代码：

<s:DataGrid id="dataGrid" itemRenderer="MyGridItemRenderer"/> 

您也可以使用此DataGrid，它有它在默认情况下。