Flex中如何使用Button控件

这篇文章给大家介绍Flex中如何使用Button控件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

Flex基础控件--Button

Flex Button控件是Flex中最基本也是相对简单的控件之一，基本对他没有什么特殊需求，他的那么多属性完全可以满足我们的需求，而且我们只需要了解几个关键的常用属性便OK。如下常用属性：

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

Label:按扭上显示的文本。

Icon:按扭上显示的图标。如：icon="@Embed('Images/mm-icon.png')",button有基本各种状态都有icon，要把Flex Button控件搞好最主要还是看美工的功底。

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控件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。