flex4 button加图标1

将 icon 嵌入到 Button 控件

Button 的图标（ icon ）必须在编译时嵌入。不能在运行时引用 Button 的 icon。按钮的图标可以是， GIF / JPEG / PNG / SVG / SWF 等文件。

要嵌入图标，需要在组建皮肤中引入 icon。如，在皮肤中，添加 <BitmaImage> 标签，设置 图片的路径属性 source ，在 MXML 中使用 @Embed 。

<s:BitmapImage source=”@Embed(‘myIcon.jpg’)”>

图标在应用程序目录中的 assets 子目录中。

下面的代码示例创建了带标签和图标的 Button 控件。它使用了自定义皮肤来引用图标和控件的标签和图标。

<?xml version="1.0" encoding="utf-8"?>

<!-- http://www.slsay.com/archives/474 -->

<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/halo">

 <fx:Script>

 <![CDATA[

 import assets.*;

 import mx.controls.Alert;

 protected function myClickHandler():void

 {

 Alert.show("Thanks for submitting.")

 }

 ]]>

 </fx:Script>

 <s:Button id="iconButton"

 width="100"

 height="30"

 x="10"

 y="10"

 label="Submit to"

 skinClass="assets.ButtonSkinSpark"

 click="myClickHandler()"/>

</s:Application>

此按钮的图标， ButtonSkinSpark.mxml ，使用了默认的 ButtonSkin.mxml 文件，但使用如下代码替换了文本层。此代码引用了 logo.gif 图标。

<!-- layer 8: text and icon -->

<s:SimpleText id="labelElement"

 textAlign="left"

 verticalAlign="middle"

 left="10" top="2" bottom="2"/>

<s:BitmapImage source="@Embed('logo.gif')"

 right="10"

 top="2"/>


给 Button 控件设置皮肤

组件中的所有可见元素，包括布局（ layout ），都由皮肤（ skin ）来控制。

可以为按钮的不同状态指定不同的图片皮肤：

    Up
    Down
    Over
    Disable

下面的状态在 Spark ToggleButton 控件和 Halo Button 控件中均可用：

    Selected & up
    Selected & down
    Selected & over
    Selected & disabled