FLEX4在按钮中添加图片
2010年08月12日 Flex 13,365 次浏览
在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> |
>>> Hello World <<<
这篇内容是否帮助到你了呢？
如果你有任何疑问或有建议留给其他朋友，都可以给我留言。
目前有3条留言：
直接按钮都出不来