Conditional color change

问题

I am unable to get the DataGridItemRenderer to pass a color value to <s:SolidColor based on the function containing an if statement based on the value of data.Bld_Type. Code below. I am vey new to Flex and not sure what the problem or if this is the right way of doing it. Any help would be appreciated. I have tried passing a hex number and color name. Neither work. Thanks.

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" 
  focusEnabled="true">

    <fx:Script>
        <![CDATA[
         import mx.events.FlexEvent;

        private var swatchCOL:uint;

        /** color function **/
        private function onLoad():void
        {
            if(data.Bld_Type == "Office")
                {
                swatchCOL="ee7970";
                //***swatchCOL="red";

                }    
            else if(data.Bld_Type == "Office/Warehouse")
                {
                swatchCOL="70b2ee";
                //***swatchCOL="blue";
                }
        }   
        ]]>
    </fx:Script>



    <s:Group left="10" right="10" top="10" bottom="10">
        <s:Rect width="25" height="25">
            <s:stroke>
                <s:SolidColorStroke color="green" weight="2"/>                        
            </s:stroke>
            <s:fill>
                <s:SolidColor color="swatchCOL"/>
            </s:fill>
        </s:Rect>
    </s:Group>



</s:MXDataGridItemRenderer>

回答1:

Try to change the following:

[Bindable]
private var swatchCOL:uint;

And:

<s:fill>
    <s:SolidColor color="{swatchCOL}"/>
</s:fill>

And finally change color types:

if(data.Bld_Type == "Office")
                {
                swatchCOL=0xee7970;
                //***swatchCOL="red";

                }    
            else if(data.Bld_Type == "Office/Warehouse")
                {
                swatchCOL=0x70b2ee;
                //***swatchCOL="blue";
                }

回答2:

Here's the easy way to do it:

override public function set data(value:Object):void {
    super.data = value;

    if(data.Bld_Type == "Office")
        swatchCOL.color = 0xee7970;
    else if(data.Bld_Type == "Office/Warehouse")
        swatchCOL.color = 0x70b2ee;
}

No binding required since the data setter gets called whenever the data changes for your item renderer. Also, you need to set the "color" member rather than the SolidColor object itself. And you can specify hex colors by prefacing the value with "0x".

Hope that helps.

回答3:

Option a) Using (e.g. if colors are not dynamically generated):

<s:states>
    <s:State name="stateA" />
    <s:State name="stateB" />
</s:states>
<!-- somewhere else in your code -->
<s:Rect id="bgFill" top="0" right="0" left="0" bottom="0">
    <s:fill>
        <s:SolidColor color.stateA="#313131" color.stateB="#f4dede" />
    </s:fill>
</s:Rect>
<!-- somewhere else in your code -->
<fx:Script>
<![CDATA[
if(data.Bld_Type == "Office")
            {
            this.currentState = "stateA"
            //***swatchCOL="red";

            }    
        else if(data.Bld_Type == "Office/Warehouse")
            {
            this.currentState = "stateB"
            //***swatchCOL="blue";
            }
    ]]>
</fx:Script>

Option b) Using AS3:

var fillColor:SolidColor;
if(data.Bld_Type == "Office")
{
fillColor = new SolidColor(0xYOUR_HEX_COLOR);
bgFill.fill = fillColor;
}    
else if(data.Bld_Type == "Office/Warehouse")
{
fillColor = new SolidColor(0xYOUR_OTHER_HEX_COLOR);
bgFill.fill = fillColor;
}


<s:Group left="10" right="10" top="10" bottom="10">
    <s:Rect id="bgFill" width="25" height="25">
        <s:stroke>
            <s:SolidColorStroke color="green" weight="2"/>                        
        </s:stroke>
        <s:fill>
            <s:SolidColor color="#ffffff"/> <!-- #ffffff is an example of a default color -->
        </s:fill>
    </s:Rect>
</s:Group>

来源：https://stackoverflow.com/questions/5792051/conditional-color-change-ssolidcolor

标签

apache-flex