-
Button皮肤定制问题（HostComponent）5
我的意图：
动态替换Button的背景图片
问题描述（下面是ButtonSkin.mxml，其中对分析此问题不重要的部分都已略去，红字部分是重点）：
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
。。。
<s:Rect left="0" top="0" right="0" bottom="0" >
<s:fill>
<s:BitmapFill source="@Embed({hostComponent.content})"/> //红字处本意是想动态加入图片的，可hostComponent总为null
</s:fill>
</s:Rect>
。。。
</s:SparkSkin>
我是这么用此皮肤的：
updateBtn.content = "assets/小图标/mechanic.png";
updateBtn.setStyle("skinClass", UpdateButtonSkin);
按上面这样写图片始终显示不出来，但把mxml文件中的hostComponent.content替换成"assets/小图标/mechanic.png"就能正常显示出图片，还有，如果在mxml文件里这样用：
<s:Button skinClass="com.syslink.web.UpdateButtonSkin" content="@Embed('assets/小图标/mechanic.png')" />，也能正常显示出来。
可我现在是需要在as文件里实现它，不知该如何修改，谢谢！2011年9月23日 23:27
添加评论
关注(0)1个答案 按时间排序 按投票排序
-
flex4 更改组件的皮肤是相当简单的 要添加图片就在皮肤里面添加 或者是自定义一个继承了button的组件 为这个组件添加一个显示图片的属性
然后新建一个皮肤 把你自定义的这个组件作为主机组件 这样这个button就是一个复用性非常高的button了2011年10月09日 09:45
相关推荐
下面是一个自定义Button皮肤的示例。首先，我们需要创建一个XML文件，定义一个SparkSkin类并继承自`s:SparkSkin`： ```xml [HostComponent("spark.components.Button")] <!-- Ellipse fills and ...
在Flex4中，皮肤定制是UI设计的重要组成部分，它允许开发者根据需求自定义组件的外观和交互效果。本主题主要围绕`SparkSkin`类和`Skin`类展开，这两类在Flex4的皮肤定制中扮演着核心角色。 **SparkSkin介绍** `...
这段代码展示了如何在Flex应用中引用自定义的Button皮肤，并将其应用到实际的Button组件上。 总之，通过理解SparkSkin和Skin的工作原理，以及掌握自定义Skin的方法，开发者能够有效地提升Flex应用的UI设计水平，使...
在Adobe Flex中，皮肤是用于定义组件外观的一种机制，它允许开发者定制用户界面的视觉效果。通过使用皮肤，可以轻松更改应用程序的外观而无需改变其功能。本教程将指导如何为一个`TitleWindow`组件创建皮肤。 ### 2...
[HostComponent("spark.components.Button")] fontFamily="MyriadPro" fontSize="11" color="0xBBBBBB" textAlign="center" horizontalCenter="0" verticalCenter="1" width="100%"> ...
在这段代码中，首先定义了按钮的四种状态（`up`、`over`、`down` 和 `disabled`），然后通过`[HostComponent("spark.components.Button")]`元数据指定该皮肤适用于 `Button` 组件。接下来，定义了按钮的主要视觉元素...
- **元数据**：`<fx:Metadata>`中的`[HostComponent]`属性指定了该皮肤对应的Flex控件，这里是`spark.components.Button`。 - **UI元素布局**： - 使用`<s:Ellipse>`绘制圆形背景，并通过`<s:fill>`和`<s:stroke>...
- **HostComponent元数据**：每个SkinClass都需要通过元数据标签来指定其HostComponent，即该皮肤适用的组件类型。 ```xml <![CDATA[ [HostComponent("spark.components.Button")] ]]> ``` - **States**...