?????本文主要介紹Flex的Button、ButtonBar、CheckBox、LinkBar、LinkButton、PopUpButton、RadioButton、RadioButtonGroup和ToggleButtonBar組件，這些組件是非常基礎的組件，如果你是學習過Flex組件的可以飄過，本文主要是針對Flex組件的初學者，希望對Flex組件陌生的朋友起到一定的幫助作用。

?

一、Button組件

?????以上是Button的編程模型：

1?<mx:Button?x="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:ButtonBar?x="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?internal?function?clickHandler(evt:ItemClickEvent):void
2?{
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:LinkBar?x="120"?y="322"?dataProvider="{viewStack}">
?2?</mx:LinkBar>
?3?<mx:ViewStack?x="120"?y="350"?id="viewStack"?width="200"?height="87">
?4?????<mx:Canvas?label="語文"?width="100%"?height="100%"?id="a"?backgroundColor="#FF9494">
?5?????</mx:Canvas>
?6?????<mx:Canvas?label="數學"?width="100%"?height="100%"?id="b"?backgroundColor="#A5DEFF">
?7?????</mx:Canvas>
?8?????<mx:Canvas?label="英語"?width="100%"?height="100%"?id="?backgroundColor="#014DBF"c">
?9?????</mx:Canvas>
10?</mx:ViewStack>

?

?

?

五、LinkButton組件

?????LinkButton組件和Button的使用基本是一樣的，詳細請參照Button組件，LinkButton的mxml編碼如下：

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

?

六、PopUpButton組件

??????PopUpButton組件一般使用得不是很多，單獨使用沒有多大的意義，通常都是與其他的組件(如菜單--Menu)一起配合使用,實現的功能有點類似與ComBoBox的效果，詳細請參考下面mxml定義：

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

?

?????通過creationComplete事件來設置協同工作的其他組件，或設置其數據源等：

?1?private?var?m:Menu;
?2?internal?function?initPopUpButton():void
?3?{
?4?????var?dp:Object?=?[{label:?"張三"},?{label:?"李四"},?{label:?"王五"}];
?5?????m?=?new?Menu();
?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?internal?function?itemClickHandler(evt:MenuEvent):void
16?{
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:RadioButton?x="352"?y="261"?label="男"?selected="true"?groupName="sex"/>
2?<mx:RadioButton?x="408"?y="261"?label="女"?groupName="sex"/>

?

八、ToggleButtonBar組件

?????ToggleButtonBar組件和ButtonBar類似，使用上也基本一致，這里就不用介紹了。mxml編碼如下：

1?<mx:ToggleButtonBar?x="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/

?

總結

以上是生活随笔為你收集整理的走近Flex组件系列(三)：按扭组件（Button,CheckBox,LinkBar,LinkButton,PopUpButton,RadioButton,ToggleButtonBar）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。