Flex基础控件--Button

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

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

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

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

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

下面是tour flex中的一个例子

 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" viewSourceURL="srcview/index.html" verticalAlign="middle" horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; ]]--> </mx:Script> <mx:Panel title="Button Control Example" layout="vertical" height="100" color="0xffffff" borderAlpha="0.15" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center"> <mx:HBox horizontalGap="10" verticalAlign="middle"> <!-- normal button --> <mx:Button id="defaultButton" color="0x323232" label="Default Button" click="{Alert.show('Default Button Pressed');}" /> <mx:Button id="iconButton" label="Button With Icon" labelPlacement="right" paddingLeft="2" icon="@Embed('assets/flex_icon.png')" downIcon="@Embed('assets/flex_icon_dwn.png')" color="0x323232" click="{Alert.show('Button With Icon Pressed');}" /> <mx:Button id="skinnedButton" label="Skinned Button" 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('Skinned Button Pressed');}" /> <mx:Button id="customButton" label="CUSTOM BUTTON" 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('CUSTOM BUTTON Pressed');}"/> </mx:HBox> </mx:Panel> </mx:Application>

不要被button那么多的属性给吓到，其实很多都是icon和style。

说到Button技术上，我用的最多的还是利用button的自定义事件：

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录"> <mx:Metadata> [Event("btnClicked")] </mx:Metadata> <mx:Script> <!--[CDATA[ [Inspectable] public var status : String; private function login(): void { dispatchEvent(new Event("btnClicked")); } ]]--> </mx:Script> <mx:Form width="248" height="100" label="Button" x="10" y="10"> <mx:FormItem label="用户名" fontSize="12"> <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/> </mx:FormItem> <mx:FormItem label="密码" fontSize="12"> <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left" displayAsPassword="true"/> </mx:FormItem> </mx:Form> <mx:Button id="loginbtn" click="login()" label="登录" textAlign="center" fontSize="12" x="190" y="118"/> </mx:TitleWindow>  

然后使用

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; private function btnClick() : void { Alert.show("test","Test"); } private function btnClickHandler(event: Event) : void { Alert.show("Event btnClicked Called"); } ]]--> </mx:Script> <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/> <widget:CLogin btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117"> </widget:CLogin> </mx:Application>