2010年08月12日   Flex   13,371 次浏览

在flex3的按钮中添加图片,只要通过button的Icon属性就可以了,但是在flex4中,button是没有这个属性的,所以要使用其它的方法,下面介绍两种方法:

第一种方式:

  <mx:Canvas width="100%" height="10%" >
     <s:CheckBox label="消息提示"  left="10"  />
       <flexlib:CanvasButton x="86"   >
          <mx:HBox verticalAlign="middle">
          <mx:Image source="/img/MC301000202/set.png" />
          <mx:Label text="设置" />
          </mx:HBox>       
          </flexlib:CanvasButton>
    </mx:Canvas>

注:包含button的容器要使用flex3的容器,用flex4的不能识别.

第二种方式:
  
   编写一个buttonSkin.mxml,里面使用BitmapFill将图片引入,然后再在按钮的MXMl文件中使用按钮的SkinClass属性将这个buttonSkin.mxml引入。例:
 
   buttonSkin.mxml

   <?xml version="1.0" encoding="utf-8"?>
   <s:Skin xmlns:fx="<a href="http://ns.adobe.com/mxml/2009">http://ns.adobe.com/mxml/2009</a>"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx">
        <!-- host component -->
        <fx:Metadata>
                [HostComponent("spark.components.Button")]
        </fx:Metadata>
        <fx:Script>
                <![CDATA[
                        import mx.events.FlexEvent;
 
                        protected function state1_enterStateHandler(event:FlexEvent):void
                        {
                               
                        }
 
                ]]>
        </fx:Script>
       
        <s:states>
                <s:State name="disabled" enterState="state1_enterStateHandler(event)"/>
                <s:State name="down"/>
                <s:State name="over"/>
                <s:State name="up" />
        </s:states>
       
        <s:Rect left="0" right="0" top="0" bottom="0" radiusX="1" radiusY="1" rotation="0" alpha="2"  >
                <s:fill>
               
                        <mx:BitmapFill source="@Embed('/img/MC301000202/set.png')"  fillMode="clip"   />
                </s:fill>
               
       
        </s:Rect>
</s:Skin>

    test.mxml

    <?xml version="1.0" encoding="utf-8"?>
      <s:WindowedApplication xmlns:fx="<a href="http://ns.adobe.com/mxml/2009">http://ns.adobe.com/mxml/2009</a>"
                                           xmlns:s="library://ns.adobe.com/flex/spark"
                                           xmlns:mx="library://ns.adobe.com/flex/mx">
        <s:layout>
                <s:BasicLayout/>
        </s:layout>
        <fx:Declarations>
                <!-- 将非可视元素(例如服务、值对象)放在此处 -->
        </fx:Declarations>
        <fx:Script> 
                <![CDATA[ 
                        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="buttonSkin"  click="myClickHandler()"/>
     </s:WindowedApplication>
赞 赏
申明:除非注明,本站文章均为原创,转载请以链接形式标明本文地址。 如有问题,请于一周内与本站联系,本站将在第一时间对相关内容进行处理。
本文地址: http://www.yyjjssnn.cn/articles/535.html
相关阅读: Flex, FLEX4

>>> Hello World <<<

这篇内容是否帮助到你了呢?

如果你有任何疑问或有建议留给其他朋友,都可以给我留言。

目前有3条留言:

  • 1# 匿名:
    2011-05-26 10:21

    :idea: :-D :evil: :cry:

  • 2# 匿名:
    2011-05-18 20:59

    直接按钮都出不来

  • 3# 匿名:
    2010-10-22 11:21

    :mrgreen: :lol: :-o :oops: :-P :roll: :( 8-O 8-O :( :roll: :-x :twisted: :-| :wink: :cry: :evil: 8) :arrow: :-? :?: :!:

:wink: :twisted: :surprised: :smile: :smile9: :smile8: :smile7: :smile6: :smile5: :smile56: :smile55: :smile54: :smile53: :smile52: :smile51: :smile50: :smile4: :smile49: :smile48: :smile47: :smile46: :smile45: :smile44: :smile43: :smile42: :smile41: :smile40: :smile3: :smile39: :smile38: :smile37: :smile36: :smile35: :smile34: :smile33: :smile32: :smile31: :smile30: :smile2: :smile29: :smile28: :smile27: :smile26: :smile25: :smile24: :smile23: :smile22: :smile21: :smile20: :smile1: :smile19: :smile18: :smile17: :smile16: :smile15: :smile14: :smile13: :smile12: :smile11: :smile10: :smile0: :sad: :rolleyes1: :redface: :razz: :question: :neutral: :mrgreen: :mad: :lol: :idea: :exclaim: :evil: :eek: :cry: :cool: :confused: :biggrin: :arrow:

友情链接: 程序员刘杨 刘杨
Copyright 2003~2018 保留所有权利 | 网站地图
备案号:湘ICP备14001005号-2

湘公网安备 43011102001322号