我正在尝试为带有图像的按钮设置外观。
以下代码适用于 flex 3,但我需要 flex 4 代码中的等效代码。 不使用皮肤类。
.muteVolumeButton
{
upSkin: Embed(source='images/sound-mute.gif');
overSkin:Embed(source='images/sound-hover.gif');
downSkin: Embed(source='images/sound-on.gif');
disabledSkin: Embed(source='images/sound-mute.gif');
}
请发布 flex 4 代码。
最佳答案
我应该说Spark框架中的换肤与Halo方式有点不同。
最好的描述是here .它是解决您的问题的最佳和最简单的方法。 这是代码:
components.ImageButton.as
package components
{
import spark.components.Button;
[Style(name="imageSkin",type="*")]
[Style(name="imageSkinDisabled",type="*")]
[Style(name="imageSkinDown",type="*")]
[Style(name="imageSkinOver",type="*")]
public class ImageButton extends Button
{
public function ImageButton()
{
super();
}
}
}
脚本:
[Embed('assets/images/btnGoUp.png')]
[Bindable]
public var btnGo:Class;
[Embed('assets/images/btnGoOver.png')]
[Bindable]
public var btnGoOver:Class;
[Embed('assets/images/btnGoDisabled.png')]
[Bindable]
public var btnGoDisabled:Class;
MXML 部分:
<components:ImageButton buttonMode="true"
imageSkin="{btnGo}" imageSkinDisabled="{btnGoDisabled}"
imageSkinDown="{btnGoOver}" imageSkinOver="{btnGoOver}"
skinClass="assets.skins.ImageButtonSkin"/>
在所有其他情况下,您始终可以通过 CSS 为状态设置外观。
- 你应该总是把你的皮肤:
@namespace s "library://ns.adobe.com/flex/spark";
- 您可以访问组件状态:
s|Button:down
- 您可以使用图像扩展皮肤,并通过 CSS 覆盖它,但它不是核心组件。
这里有一些有用的链接:
http://blog.flexexamples.com/2009/03/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/
http://opensource.adobe.com/wiki/display/flexsdk/CSS+Namespaces+Support
http://cookbooks.adobe.com/post_How_to_use_the_new_CSS_syntax_in_Flex_4-15726.html
关于actionscript-3 - Flex 4 中的图像蒙皮按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3736298/