Flex Button控件常见属性用法指导-button控件的属性

本文和大家重点讨论一下Flex Button控件，它是Flex中最基本也是相对简单的控件之一，它的那么多属性完全可以满足我们的需求，而且我们只需要了解几个关键的常用属性便OK。

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>

【编辑推荐】