flex 4.6 按钮（button）和按钮皮肤（buttonSkin）类的实现
发布时间：2020-12-15 03:38:56 所属栏目：百科 来源：网络整理
导读：使用flex开发手机应用已经有一年多的时间，略有心得。在这里为自己的一点经验与大家分享一下。 实现的功能：flex 4.5以后的按钮跟以前的版本略有区别，主要体现在将按钮的皮肤单提出来，不在单纯依赖CSS。具体实现button类和buttonSkin皮肤类。 一、创建按钮
|
使用flex开发手机应用已经有一年多的时间，略有心得。在这里为自己的一点经验与大家分享一下。
实现的功能：flex 4.5以后的按钮跟以前的版本略有区别，主要体现在将按钮的皮肤单提出来，不在单纯依赖CSS。具体实现button类和buttonSkin皮肤类。
一、创建按钮，命名为
GlobalBackBtn（全局返回按钮）
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
?
?
?
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
</s:Button>
二、创建按钮的皮肤类?
这里使用的MXML标签语言，当然也可用纯AS代码重写此类。有人认为
纯AS代码性能更高，以前我也是这样认为，为此还做了试验，结果在我看来在二者在性能上相差无几（个人意见、仅供参考）。所以我选择使用更为简单易懂的
mxml标签语言。
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="init()"
alpha.disabled=".5">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import com.richfit.mobileBI.tools.FilterLib;
protected function init():void
{
//为传入的文字添加滤镜
if(lableElement)
lableElement.filters = [FilterLib.bevelGradient,FilterLib.glowText];
}
]]>
</fx:Script>
<!-- 按钮的四种状态states -->
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<!-- 按下时添加阴影 -->
<s:Rect radiusX="4" radiusY="4" top="0" right="0" bottom="0"?
left="0" includeIn="down" >
<s:fill>
<s:SolidColor color="0xffffff" alpha="1"/>
</s:fill>
</s:Rect>
<!-- 按钮的背景和边框 -->
<s:Rect id="rect" excludeFrom="down" left="0" right="0" top="0" bottom="0" radiusX="4"
radiusY="4">
<s:fill>
<s:SolidColor alpha="0" color="#323333"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke alpha="0" color="#ffffff" weight="1"/>
</s:stroke>
</s:Rect>
<!-- 按钮添加高亮遮罩 -->
<s:Rect excludeFrom="down" left="2" right="2" top="2" height="50%" radiusX="4" radiusY="4">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry alpha=".5" color="0xFFFFFF"/>
<s:GradientEntry alpha="0" color="0xFFFFFF"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- 文字的样式text -->
<s:Label id="lableElement" fontSize="20" horizontalCenter="0"?
text="{hostComponent.label}"
textAlign="center" verticalAlign="middle" verticalCenter="1"
visible.down="false"/>
</s:Skin>
三、使用
GlobalBackBtn按钮
<button:GlobalBackBtn id="concealBtn" label="返 ?
四、效果图
五、高级按钮应用：
如果你有多个按钮，仅仅是图片内容不一样，完全没有必要为每张图片写一个按钮。可以为一个按钮传递不同图片路径即可。
具体方法是：
一、在
创建按钮时，添加图片路径参数
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
?
?
?
<fx:Declarations>
<!-- 用于接收图片路径 -->
public var imageURL:String="";
</fx:Declarations>
</s:Button>
二、
创建按钮的皮肤类时，接收父类传入的参数
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="init()"
alpha.disabled=".5">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import com.richfit.mobileBI.tools.FilterLib;
protected function init():void
{
//为传入的图片路径
if (this.parent as?
?
}
}
]]>
</fx:Script>
<!-- 按钮的四种状态states -->
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<!--按钮显示图片-->
<s:Image id="img" top="0"/>
<!--按钮下方显示文字-->
<s:Label id="lableElement" top="138" horizontalCenter="0" styleName="FirtViewIcon"
text="{hostComponent.label}"/>
</s:Skin>
三、使用按钮，并传入图片地址
<button:GlobalBackBtn id="concealBtn" label="返 ?
四、效果图：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
