在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，它有它在默認情況下。