当前位置 博文首页 > flex自定义按钮皮肤示例附图

    flex自定义按钮皮肤示例附图

    作者:admin 时间:2021-08-18 17:50

    先看效果图:

    其中Test.mxml为:
    复制代码 代码如下:

    <?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="955" minHeight="600">
    <fx:Declarations>
    <!-- 将非可视元素(例如服务、值对象)放在此处 -->
    </fx:Declarations>
    <mx:HBox horizontalCenter="0" verticalCenter="1">
    <s:Button skinClass="components.RightButtonSkin" />
    <s:Button skinClass="components.CancelButtonSkin" />
    <s:Button skinClass="components.NewStyleButtonSkin"/>
    <s:Button skinClass="components.StyleButtonSkin"/>
    </mx:HBox>
    </s:Application>

    RightButtonSkin.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" alpha.disabled=".5">

    <!-- states -->
    <s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
    </s:states>

    <!-- border and fill -->
    <s:Rect radiusX="4" radiusY="4" top="0" right="0"
    bottom="0" left="0">
    <s:fill>
    <s:SolidColor color="0xFAFAFA" color.over="0xEEEEEE"
    color.down="0xEEEEEE"/>
    </s:fill>
    <s:stroke>
    <s:SolidColorStroke color="0xCCCCCC" weight="1"/>
    </s:stroke>
    </s:Rect>

    <!-- highlight on top -->
    <s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2"
    height="50%">
    <s:fill>
    <s:LinearGradient rotation="90">
    <s:GradientEntry color="0xFFFFFF" alpha=".5"/>
    <s:GradientEntry color="0xFFFFFF" alpha=".1"/>
    </s:LinearGradient>
    </s:fill>
    </s:Rect>

    <s:Label text="确定" color="0x131313"
    textAlign="center"
    fontFamily="宋体"
    verticalAlign="middle"
    horizontalCenter="0" verticalCenter="1"
    left="30" right="30" top="8" bottom="8"
    />
    </s:Skin>

    NewStyleButtonSkin.mxml(新建按钮皮肤):

    ps:新建按钮上面那个icon是画上去的
    复制代码 代码如下:

    <?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" alpha.disabled=".5">

    <!-- states -->
    <s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
    </s:states>

    <!-- border and fill -->
    <s:Rect radiusX="4" radiusY="4" top="0" right="0"
    bottom="0" left="0">
    <s:fill>
    <s:SolidColor color="0xFAFAFA" color.over="0xEEEEEE" color.down="0xEEEEEE"/>
    </s:fill>

    <s:stroke>
    <s:SolidColorStroke color="0xCCCCCC" weight="1"/>
    </s:stroke>
    </s:Rect>

    <!-- highlight on top -->
    <s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2"
    height="50%">
    <s:fill>
    <s:LinearGradient rotation="90">
    <s:GradientEntry color="0xFFFFFF" alpha=".5"/>
    <s:GradientEntry color="0xFFFFFF" alpha=".1"/>
    </s:LinearGradient>
    </s:fill>
    </s:Rect>
    <s:Graphic>
    <s:BitmapImage source="assets/round_plus2.png" left="8" top="6"/>
    </s:Graphic>
    <s:Label text="新建样式" color="0x131313"
    fontFamily="宋体"
    left="30" right="20" top="8" bottom="8"
    />

    </s:Skin>
    jsjbwy
    下一篇:没有了