Flex4按钮的Skin问题。GG们请赐教。。

[S_Earlene]

GG们。。问个问题哈。。

我有很多按钮。当然每个按钮有四个状态。。四个状态显示的是不同背景图片。。

是不是我每个按钮都要写一个Skin类。。。


有的按钮大小是一样的。。就是四个状态的背景图片都是不一样的。。。

有没有简单一点的方法。。


如果这样写。。那我的Skin类是不是一大堆。。。

[niwenbin416]

为什么不直接用图片作按钮！

[leemiki]

图片做按钮是比较简单，但是交互性差，没有按钮按下去那种感觉！

按钮A和按钮B四个状态的背景图分别一样吗？？

不一样那估计没什么好的办法了~~~~

[niwenbin416]

至于图片交互友好性方面写个滤镜，完全可以有和按钮一样的效果
囧··我个人比较讨厌写skin之类的东西，对那东西不熟··

[舷Kelvin]

4里面没法用CSS吗，用CSS很简单的啊

.tabs{
upSkin:Embed(source="assets/images/tab_off.png");
downSkin:Embed(source="assets/images/tab_on.png");
overSkin:Embed(source="assets/images/tab_on.png");
selectedUpSkin:Embed(source="assets/images/tab_on.png");
selectedOverSkin:Embed(source="assets/images/tab_on.png");
disabledSkin:Embed(source="assets/images/tab_off.png");
}

[水中影子]

css 更多的适合flex3

flex4 大多都写skin

[周药师]

[S_Earlene]

如果用CSS。那<s:Button>得改成<mx:Button>.否则对按钮不起作用。那不是没有用上4的新Spark组件皮肤类。。那不是还是3的思想。。。。我很纠结。。现在用4开发。、、

[◉‿◉（´-`）.｡oO（]

4.0的skin有一个就行了!很简单,在设计视图选中Button,然后在属性外观哪里点击创建Skin,那么系统会默认生成Button的集中视图状态的基础代码,然后在设计视图里拖动拖动就行了O(∩_∩)O~

[lovebin_bin]

那就用状态，分别定义四种状态，同时赋一个背景，将这四种状态写一个SKIN中，到时候调用就可以了

[◉‿◉（´-`）.｡oO（]

偶有一个想法但是没试过,楼主可以试试!
所有按钮的背景图片放在data属性里配置,
完了在统一的一个Skin里通过解析
[HostComponent("spark.components.Button")]
hostComponent.data
属性,从而达到不同背景图片的效果!
明白吗?

[byyoung]

[Quote=引用 10 楼 alan_xuan_wu 的回复:]

偶有一个想法但是没试过,楼主可以试试!
所有按钮的背景图片放在data属性里配置,
完了在统一的一个Skin里通过解析
[HostComponent("spark.components.Button")]
hostComponent.data
属性,从而达到不同背景图片的效果!
明白吗?
[/Quote]

小祥正解，Skin用hostComponent与Component交互。

[◉‿◉（´-`）.｡oO（]

比如这里有个Button
<s:Button data="normal:images/normal.png;over:images/over.png;down:images/down.png" skinClass="skin.ImageButton" />
其data属性配置了一些图片的路径,那么在skin.ImageButton皮肤里通过解析data属性是不是就可以获得不同的图片了!因为你的data属性里可以配置不同的图片吧!每个按钮的图片都可以不一样啊!
skin里只是提取了他们共同的操作封装,也就是在按钮的状态(up,over,down...)发生改变时去解析该按钮的data属性!从而达到不同的按钮使用同一个皮肤可以有不同的视图效果!
皮肤类如下:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
			 xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:mx="library://ns.adobe.com/flex/mx"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
			 minWidth="21" minHeight="21" alpha.disabled="0.5">
    
    <fx:Metadata>
        <![CDATA[ 
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			private function buttonBG(type :int):String{
				var data :Object = hostComponent.data;
				//这里解析data属性,从而获得不同的状态的背景图片的url;怎么解析就不用写了吧O(∩_∩)O~
				switch(type){
					case 0:{
						return "up背景图片的URL";
					}
					case 1:{
						return "over背景图片的URL";
					}
					case 2:{
						return "down背景图片的URL";
					}
					case 3:{
						return "disabled背景图片的URL";
					}
					default{
						return "up背景图片的URL";
					}
				}
			}
		]]>
	</fx:Script>
    
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
	
	<s:img source.up="buttonBG(0)" source.over="buttonBG(1)" source.down="buttonBG(2)" source.disabled="buttonBG(3)" />
        
</s:SparkSkin>

[fw176170847]

坚持用3的飘过