本文和大家重點(diǎn)討論一下Flex Button控件，它是Flex中最基本也是相對(duì)簡(jiǎn)單的控件之一，它的那么多屬性完全可以滿足我們的需求，而且我們只需要了解幾個(gè)關(guān)鍵的常用屬性便OK。

Flex基礎(chǔ)控件--Button

Flex Button控件是Flex中最基本也是相對(duì)簡(jiǎn)單的控件之一，基本對(duì)他沒(méi)有什么特殊需求，他的那么多屬性完全可以滿足我們的需求，而且我們只需要了解幾個(gè)關(guān)鍵的常用屬性便OK。如下常用屬性：

1、emphasized：獲取或設(shè)置一個(gè)布爾值，指示當(dāng)按鈕處于彈起狀態(tài)時(shí)，Button組件周圍是否繪有邊框。默認(rèn)為：false

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

3、Icon:按扭上顯示的圖標(biāo)。如：icon="@Embed('Images/mm-icon.png')",button有基本各種狀態(tài)都有icon，要把Flex Button控件搞好最主要還是看美工的功底。

4、click:按扭的監(jiān)聽(tīng)單擊事件所的方法。除了click也可以監(jiān)聽(tīng)它的其他識(shí)見(jiàn)，如mouseMove、mouseOver、mouseOut、rollOver、rollOut、mouseDown和mouseUp。

下面是tourFlex中的一個(gè)例子

viewplaincopytoclipboardprint?  
<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="horizontal"viewSourceURL="srcview/index.html" 
verticalAlign="middle"horizontalAlign="center"backgroundGradientColors="[0x000000,0x323232]"> 
<mx:Script> 
<!--[CDATA[  
importmx.controls.Alert;  
]]--> 
</mx:Script> 
<mx:Paneltitlemx:Paneltitle="ButtonControlExample"layout="vertical"height="100"color="0xffffff"borderAlpha="0.15" 
paddingTop="10"paddingRight="10"paddingBottom="10"paddingLeft="10"horizontalAlign="center"> 
 
<mx:HBoxhorizontalGapmx:HBoxhorizontalGap="10"verticalAlign="middle"> 
<!--normalbutton--> 
<mx:Buttonidmx:Buttonid="defaultButton"color="0x323232"label="DefaultButton"click="{Alert.show('DefaultButtonPressed');}"/> 
 
<mx:Buttonidmx:Buttonid="iconButton"label="ButtonWithIcon"labelPlacement="right"paddingLeft="2"  
icon="@Embed('assets/Flex_icon.png')"downIcon="@Embed('assets/Flex_icon_dwn.png')"  
color="0x323232"click="{Alert.show('ButtonWithIconPressed');}"/> 
 
<mx:Buttonidmx:Buttonid="skinnedButton"label="SkinnedButton"width="150"upSkin="@Embed('assets/btn_up.png')"  
overSkin="@Embed('assets/btn_over.png')"downSkin="@Embed('assets/btn_down.png')"  
focusSkin="@Embed('assets/btn_focus.png')"disabledSkin="@Embed('assets/btn_disabled.png')"  
color="0x323232"textRollOverColor="0xffffff"textSelectedColor="0xffffff"paddingLeft="20"  
click="{Alert.show('SkinnedButtonPressed');}"/> 
 
<mx:Buttonidmx:Buttonid="customButton"label="CUSTOMBUTTON"fontFamily="Arial"fontStyle="italic"fontWeight="normal"cornerRadius="12"  
color="0xffffff"fillColors="[0x55C0FF,0x0050AA]"fillAlphas="[1.0,1.0]"highlightAlphas="[1.0,0.2]"focusAlpha="0.2" 
textRollOverColor="0xffffff"textSelectedColor="0x55C0FF"click="{Alert.show('CUSTOMBUTTONPressed');}"/> 
</mx:HBox> 
</mx:Panel> 
</mx:Application> 
<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="horizontal"viewSourceURL="srcview/index.html" 
verticalAlign="middle"horizontalAlign="center"backgroundGradientColors="[0x000000,0x323232]"> 
<mx:Script> 
<!--[CDATA[  
importmx.controls.Alert;  
]]--> 
</mx:Script> 
<mx:Paneltitlemx:Paneltitle="ButtonControlExample"layout="vertical"height="100"color="0xffffff"borderAlpha="0.15" 
paddingTop="10"paddingRight="10"paddingBottom="10"paddingLeft="10"horizontalAlign="center"> 
 
<mx:HBoxhorizontalGapmx:HBoxhorizontalGap="10"verticalAlign="middle"> 
<!--normalbutton--> 
<mx:Buttonidmx:Buttonid="defaultButton"color="0x323232"label="DefaultButton"click="{Alert.show('DefaultButtonPressed');}"/> 
 
<mx:Buttonidmx:Buttonid="iconButton"label="ButtonWithIcon"labelPlacement="right"paddingLeft="2"  
icon="@Embed('assets/Flex_icon.png')"downIcon="@Embed('assets/Flex_icon_dwn.png')"  
color="0x323232"click="{Alert.show('ButtonWithIconPressed');}"/> 
 
<mx:Buttonidmx:Buttonid="skinnedButton"label="SkinnedButton"width="150"upSkin="@Embed('assets/btn_up.png')"  
overSkin="@Embed('assets/btn_over.png')"downSkin="@Embed('assets/btn_down.png')"  
focusSkin="@Embed('assets/btn_focus.png')"disabledSkin="@Embed('assets/btn_disabled.png')"  
color="0x323232"textRollOverColor="0xffffff"textSelectedColor="0xffffff"paddingLeft="20"  
click="{Alert.show('SkinnedButtonPressed');}"/> 
 
<mx:Buttonidmx:Buttonid="customButton"label="CUSTOMBUTTON"fontFamily="Arial"fontStyle="italic"fontWeight="normal"cornerRadius="12"  
color="0xffffff"fillColors="[0x55C0FF,0x0050AA]"fillAlphas="[1.0,1.0]"highlightAlphas="[1.0,0.2]"focusAlpha="0.2" 
textRollOverColor="0xffffff"textSelectedColor="0x55C0FF"click="{Alert.show('CUSTOMBUTTONPressed');}"/> 
</mx:HBox> 
</mx:Panel> 
</mx:Application> 
 

 不要被Flex Button控件那么多的屬性給嚇到，其實(shí)很多都是icon和style。

說(shuō)到Button技術(shù)上，我用的最多的還是利用Flex Button控件的自定義事件：

viewplaincopytoclipboardprint?  
<mx:TitleWindowxmlns:mxmx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml" 
 
width="286"height="208"layout="absolute"title="用戶登錄"> 
<mx:Metadata> 
[Event("btnClicked")]  
</mx:Metadata> 
<mx:Script> 
<!--[CDATA[  
[Inspectable]  
publicvarstatus:String;  
 
privatefunctionlogin():void{  
dispatchEvent(newEvent("btnClicked"));  
}  
]]--> 
</mx:Script> 
<mx:Formwidthmx:Formwidth="248"height="100"label="Button"x="10"y="10"> 
<mx:FormItemlabelmx:FormItemlabel="用戶名"fontSize="12"> 
<mx:TextInputidmx:TextInputid="username"width="158"height="28"fontSize="15"textAlign="left"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="密碼"fontSize="12"> 
<mx:TextInputidmx:TextInputid="password"width="159"height="30"fontSize="15"textAlign="left" 
displayAsPassword="true"/> 
</mx:FormItem> 
</mx:Form> 
<mx:Buttonidmx:Buttonid="loginbtn"click="login()"label="登錄"textAlign="center"fontSize="12"x="190"y="118"/> 
</mx:TitleWindow> 
<mx:TitleWindowxmlns:mxmx:TitleWindowxmlns:mx="http://www.adobe.com/2006/mxml" 
 
width="286"height="208"layout="absolute"title="用戶登錄"> 
<mx:Metadata> 
[Event("btnClicked")]  
</mx:Metadata> 
<mx:Script> 
<!--[CDATA[  
[Inspectable]  
publicvarstatus:String;  
 
privatefunctionlogin():void{  
dispatchEvent(newEvent("btnClicked"));  
}  
]]--> 
</mx:Script> 
<mx:Formwidthmx:Formwidth="248"height="100"label="Button"x="10"y="10"> 
<mx:FormItemlabelmx:FormItemlabel="用戶名"fontSize="12"> 
<mx:TextInputidmx:TextInputid="username"width="158"height="28"fontSize="15"textAlign="left"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="密碼"fontSize="12"> 
<mx:TextInputidmx:TextInputid="password"width="159"height="30"fontSize="15"textAlign="left" 
displayAsPassword="true"/> 
</mx:FormItem> 
</mx:Form> 
<mx:Buttonidmx:Buttonid="loginbtn"click="login()"label="登錄"textAlign="center"fontSize="12"x="190"y="118"/> 
</mx:TitleWindow> 
 

 然后使用

viewplaincopytoclipboardprint?  
<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:widget="*"> 
<mx:Script> 
<!--[CDATA[  
importmx.controls.Alert;  
privatefunctionbtnClick():void{  
Alert.show("test","Test");  
}  
privatefunctionbtnClickHandler(event:Event):void{  
Alert.show("EventbtnClickedCalled");  
}  
]]--> 
</mx:Script> 
<mx:Buttonidmx:Buttonid="bb"x="107"y="37"label="Button"click="btnClick()"/> 
<widget:CLoginbtnClickedwidget:CLoginbtnClicked="btnClickHandler(event)"x="107"y="94"width="204"height="117"> 
</widget:CLogin> 
</mx:Application> 
 

【編輯推薦】

1. 學(xué)習(xí)筆記 Flex Panel控件內(nèi)部容器大小計(jì)算方法
2. Flex基礎(chǔ) 創(chuàng)建***個(gè)Flex項(xiàng)目
3. FlexBuilder教程教你如何創(chuàng)建自定義控件
4. FlexBuilder3.0與Eclipse3.4的***結(jié)合
5. 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件