Flex中颜色选择器改变容器的背景色

1、第一步，这里作为一个实例，需要在Flex项目下直接新建一个Flex应用程序，名称根据自己的需要起，在这个实例中取名“Line.mxml”，并修改应用程序中的宽度和高度，按照百分比来算，如下图所示：

2、第二步，利用Flash Builder4.0中快速的设计模式，直接将ColorPicker组件拖放到视图上，这样可以快速的节约时间，如下图所示：

3、第三步，这里，利用ColorPicker改变VBox容器的背景色，那么需要给VBox一个ID；又由于ColorPicker改变是要绑定它的change事件，故给ColorPicker一个change事件

<mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" id="bg">

<mx:ColorPicker id="selectColor" change="selectColor_changeHandler(event)"/>

</mx:VBox>

如下图所示：

4、第四步，在ColorPicker的change事件，需要给VBox设置背景色，直接利用setStyle方法

id.setStyle(属性名称,属性值);

/**

* 改变颜色改变背景色

*/

protected function selectColor_changeHandler(event:ColorPickerEvent):void

{

bg.setStyle("backgroundColor",selectColor.selectedColor);

}

这样就可以设置VBox的背景色

如下图所示：

5、第五步，直接运行Flex应用程序，将会在浏览器上看到下图，改变ColorPicker颜色值，VBox背景色也随之改变，如下图所示：