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

admin Flex

2023-12-07 0 547

先看效果图：其中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 id=\”rightButton\” skinClass=\”components.RightButtonSkin\” /> <s:Button id=\”cancelButton\” skinClass=\”components.CancelButtonSkin\” /> <s:Button id=\”newStyleButton\” skinClass=\”components.NewStyleButtonSkin\”/> <s:Button id=\”StyleButton\” 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 id=\”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 id=\”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>