FLEX中的button组件详解

先来说说FLASH里面的最最简单的一个组件，BUTTON组件，一个按钮。功能简单，但是必不可少。BUTTON组件的属性方法有很多，通常都能够满足我们的程序要求。使用起来也非常的方便。你有两种方法来创建一个button组件。一个是在MXML中直接拖入一个BUTTON组件，这样舞台上就创建了一个BUTTON组件，并且当你调整组件的属性的时候，此时是实时预览的。第二种方法就是你可以使用代码来生成一个button组件。我们来看一下一个简单的范例，在这个范例中出现了上面所说的两种生成按钮的方法。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="550" minHeight="400">

<fx:Script>
<![CDATA[
import spark.components.Button;
protected function mybutton_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
trace("您点击了按钮组件！");
var button:Button = new Button();
button.x = 200;
button.y = 10;
button.label = "代码生成的按钮";
button.width = 150;
button.height = 20;
this.addElement(button);
button.addEventListener(MouseEvent.CLICK,button_click);
}
private function button_click(evt:MouseEvent):void
{
if(evt.currentTarget.height == 20)
{
evt.currentTarget.height = 70;
}else{
evt.currentTarget.height = 20;
}
}
]]>
</fx:Script>

<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:Button id="mybutton" x="50" y="50" width="100" height="50" label="按钮组件" click="mybutton_clickHandler(event)"  alpha="1" visible="true"/>
</s:Application>
这段代码很简单，就是一个MXML文件，里面涉及到了BUTTON组件最简单的设置。大家自己看一看，其他的属性相应的设置就可以了。为了方便学习，大家最好准备一个FLEX的帮助文档，CHM格式的最好。