Flex中如何使用Button控件

這篇文章給大家介紹Flex中如何使用Button控件，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

Flex基礎控件--Button

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

1、emphasized：獲取或設置一個布爾值，指示當按鈕處于彈起狀態時，Button組件周圍是否繪有邊框。默認為：false

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

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

4、click:按扭的監聽單擊事件所的方法。除了click也可以監聽它的其他識見，如mouseMove、mouseOver、mouseOut、rollOver、rollOut、mouseDown和mouseUp。

下面是tourFlex中的一個例子

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控件那么多的屬性給嚇到，其實很多都是icon和style。

說到Button技術上，我用的最多的還是利用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>

關于Flex中如何使用Button控件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。