本文主要介绍Flex的Button、ButtonBar、CheckBox、LinkBar、LinkButton、PopUpButton、RadioButton、RadioButtonGroup和ToggleButtonBar组件，这些组件是非常基础的组件，如果你是学习过Flex组件的可以飘过，本文主要是针对Flex组件的初学者，希望对Flex组件陌生的朋友起到一定的帮助作用。

一、Button组件

以上是Button的编程模型：

1 <mx:Buttonx="341"y="24"label="Button"height="56"width="104"2 enabled="true"fontSize="14"labelPlacement="right"3 id="btn"click="onClick()">4 </mx:Button>

从上面可以看到Button有很多的属性，我们只需要了解几个关键的常用属性便OK。如下常用属性：

1、emphasized：获取或设置一个布尔值，指示当按钮处于弹起状态时，Button 组件周围是否绘有边框。默认为：false

2、Label:按扭上显示的文本。

3、Icon:按扭上显示的图标。如：icon="@Embed('Images/mm-icon.png')"

4、click:按扭的监听单击事件所的方法。除了click也可以监听它的其他识见，如mouseMove、mouseOver、mouseOut、rollOver、rollOut、mouseDown 和 mouseUp。

二、ButtonBar组件

ButtonBar组件可以理解为多个Button组件组合在一起形成的一个复合组件，其中的每一个组件也就是一个Button。

1 <mx:ButtonBarx="100"y="307"id="btnBar"itemClick="clickHandler(event)">2 <mx:dataProvider>3 <mx:Array>4 <mx:String>张三</mx:String>5 <mx:String>李四</mx:String>               6 <mx:String>王五</mx:String>7 </mx:Array>8 </mx:dataProvider>9 </mx:ButtonBar>

需要记住的就是它的itemClick事件，如上代码中。

1 internalfunction clickHandler(evt:ItemClickEvent):void2 {3 //通过evt便可得到当前ButtonBar中的被触发Click事件的组件项4 var label:String=evt.label;5 }

三、CheckBox组件

CheckBox组件就不用多说了，做过Winform/Web程序的人都认识他，他只有两种状态：选中|未选中，如下示例：

1 <mx:CheckBox x="341"y="120"label="同意"click="onClick()"selected="true"/>

应用得最多的就是它的click事件和selected属性。

四、LinkBar组件

LinkBar组件和上面的ButtonBar很相似，不同的是ButtonBar中的项全部都是有效的，而LinkBar中当前只有一项有效，也就是说只有一想可以点击：

1 <mx:LinkBarx="120"y="322"dataProvider="{viewStack}">2 </mx:LinkBar>3 <mx:ViewStackx="120"y="350"id="viewStack"width="200"height="87">4 <mx:Canvaslabel="语文"width="100%"height="100%"id="a"backgroundColor="#FF9494">5 </mx:Canvas>6 <mx:Canvaslabel="数学"width="100%"height="100%"id="b"backgroundColor="#A5DEFF">7 </mx:Canvas>8 <mx:Canvaslabel="英语"width="100%"height="100%"id=" backgroundColor="#014DBF"c">9 </mx:Canvas>10 </mx:ViewStack>

五、LinkButton组件

LinkButton组件和Button的使用基本是一样的，详细请参照Button组件，LinkButton的mxml编码如下：

1 <mx:LinkButtonx="499"y="41"label="LinkButton"icon="@Embed('Images/icon.png')"/>

六、PopUpButton组件

PopUpButton组件一般使用得不是很多，单独使用没有多大的意义，通常都是与其他的组件(如菜单--Menu)一起配合使用,实现的功能有点类似与ComBoBox的效果，详细请参考下面mxml定义：

1 <mx:PopUpButtonx="125"y="425"id="popUp"2 creationComplete="initPopUpButton()"width="76">3 </mx:PopUpButton>

通过creationComplete事件来设置协同工作的其他组件，或设置其数据源等：

1 privatevar m:Menu;2 internalfunction initPopUpButton():void3 {4 var dp:Object=[{label:"张三"}, {label:"李四"}, {label:"王五"}];5 m=newMenu();6 m.dataProvider=dp;7 m.selectedIndex=0;8 m.addEventListener("itemClick",itemClickHandler);9 popUp.popUp=m;10 popUp.label=m.dataProvider[m.selectedIndex].label;11 }12 /**13 * 默认监听的菜单事件14 **/15 internalfunction itemClickHandler(evt:MenuEvent):void16 {17 var label:String=evt.item.lebel;18 popUp.label=label;19 popUp.close();20 m.selectedIndex=evt.index;21 }

运行效果如下图：
     

七、RadioButton组件和RadioButtonGroup组件

RadioButton组件和CheckBox组件一样，在html和asp.net里也有这东西，使用和asp.net里差不多，如下编码：

1 <mx:RadioButtonx="352"y="261"label="男"selected="true"groupName="sex"/>2 <mx:RadioButtonx="408"y="261"label="女"groupName="sex"/>

八、ToggleButtonBar组件

ToggleButtonBar组件和ButtonBar类似，使用上也基本一致，这里就不用介绍了。mxml编码如下：

1 <mx:ToggleButtonBarx="369"y="330"id="togButton">2 <mx:dataProvider>3 <mx:Array>4 <mx:String>张三</mx:String>5 <mx:String>李四</mx:String>6 <mx:String>王五</mx:String>7 </mx:Array>8 </mx:dataProvider>9 </mx:ToggleButtonBar>

版权说明

本文属原创文章，欢迎转载，其版权归作者和博客园共有。

作      者：Beniao

文章出处：http://beniao.cnblogs.com/  或  http://www.cnblogs.com/