flex中如何动态填充颜色

不是很明白你的用途
如果是像滚动条那样的效果的话使用ProgressBar控件就可以了
如果只是单纯的修改颜色的话那很简单，这个小例子
<mx:VBox>
     <mx:HBox>
      <mx:Button label="red" click="myCanvas.setStyle('backgroundColor',0xff0000)"/>
        <mx:Button label="green" click="myCanvas.setStyle('backgroundColor',0x00FF00)"/>
        <mx:Button label="bule" click="myCanvas.setStyle('backgroundColor',0x0000FF)"/>
     </mx:HBox>
     <mx:Canvas id="myCanvas" height="200" width="200"/>
</mx:VBox>
当然你也可以自己定义动态CSS来改变状态。另外一般在Flex中难以实现的效果用Flash制作后导进Flex也是一个不错的选择

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[

        import mx.collections.ArrayCollection;        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
        ]]>
    </mx:Script>

    <mx:Panel title="ColumnChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
         paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">

         <mx:ColumnChart id="column" height="100%" color="0x323232"
            showDataTips="true" dataProvider="{medalsAC}">

            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Country"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold"/>
                <mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver"/>
                <mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze"/>
            </mx:series>
        </mx:ColumnChart>        <mx:Legend dataProvider="{column}" color="0x323232"/>

    </mx:Panel>
</mx:Application>看看
这个满足吗？

搜下相关例子啊，再说 sun 的东西，在发布包里面都会有很详细的 demo。自己去看下里面的sample吧。

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_SimpleText_backgroundColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:s="library://ns.adobe.com/flex/spark"
        creationComplete="init();">

    <fx:Script>
        <![CDATA[
            private function init():void {
                var arr:Array = ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                                "Fusce id nisi in nisi pulvinar convallis.",
                                "Sed eu justo in nibh ultrices hendrerit.",
                                "Phasellus nec metus at libero pretium imperdiet nec quis libero.",
                                "Aenean nec turpis ut turpis lacinia laoreet.",
                                "Phasellus quis massa massa, ut aliquam massa.",
                                "Sed placerat purus at quam consectetur lacinia.",
                                "Phasellus blandit risus et eros varius pellentesque.",
                                "Sed aliquam purus eget quam consequat congue.",
                                "Nulla et sapien orci, eu ultricies magna.",
                                "Aenean et nisl quis mi dapibus lobortis.",
                                "Cras dapibus lacus eu ipsum blandit vel suscipit velit sagittis."];
                simpleTxt.text = arr.join("\n");
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:SimpleText id="simpleTxt"
            backgroundColor="{colorPicker.selectedColor}"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>
----------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="dp">
        <products>
            <product label="Product 1" data="3" />
            <product label="Product 2" data="1" />
            <product label="Product 3" data="4" />
            <product label="Product 4" data="1" />
            <product label="Product 5" data="5" />
            <product label="Product 6" data="9" />
            <product label="Product 7" data="2" />
        </products>
    </mx:XML>

    <mx:PieChart id="pieChart"
            dataProvider="{dp.product}"
            showDataTips="true"
            height="100%"
            width="100%">
        <mx:series>
            <mx:PieSeries id="pieSeries"
                    field="@data"
                    labelPosition="callout">
                <mx:fills>
                       <mx:SolidColor color="red" alpha="1.0" />
                       <mx:SolidColor color="haloOrange" alpha="1.0" />
                       <mx:SolidColor color="yellow" alpha="1.0" />
                       <mx:SolidColor color="haloGreen" alpha="1.0" />
                       <mx:SolidColor color="haloBlue" alpha="1.0" />
                </mx:fills>
                <mx:filters>
                    <mx:Array />
                </mx:filters>
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>

</mx:Application>

调试易

flex中如何动态填充颜色

解决方案 »