Стилизация цвета переднего и заднего плана в списке Flex / таблице данных

Question

Flex предоставляет CSS-свойство selectionColor для стилизации цвета background выбранного списка / сетки данных.Тем не менее, я не могу понять, как стилизовать цвет переднего плана или текста выбранного списка.Похоже, вы можете изменить цвет переднего плана только для всех строк.

Так, например, я хотел получить очень темный цвет фона выделения и очень светлый невыбранный цвет фона.Точно так же вы хотите, чтобы для выделения был выделен светлый цвет, а для отмененного выделения - темный.

Я знаю, что могу сделать это с помощью специального средства визуализации элементов, но это выглядит довольно глупо.Дело в том, чтобы стилизовать все списки / таблицы данных в моем приложении.Я не хочу устанавливать пользовательское средство визуализации элементов или расширять 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

Для Spark DataGrid вам необходимо создать новое средство визуализации элементов на основе GridItemRenderer. Затем присвойте это свойству itemRenderer в DataGrid.

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 , которая по умолчанию включена.