-
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
相关推荐
[HostComponent("spark.components.Button")] <!-- Ellipse fills and strokes for different states --> ``` 在这个例子中，我们定义了四种状态（up、over、down和disabled），并使用了椭圆和富文本元素来...
下面是一个简单的`SparkSkin`应用示例，用于定制一个按钮（Button）的皮肤： ```xml [HostComponent("spark.components.Button")] <!-- 填充和边框颜色定义 --> <!-- 文本元素定义 --> `...
在Flex4中，皮肤（skin）是一种用于控制UI组件外观的设计模式，允许开发者和设计师定制组件的视觉表现，而不必触及组件的核心功能代码。这不仅提高了开发效率，还实现了设计与逻辑的分离，使得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>...
ScaleBar的外观定制主要通过创建一个新的皮肤文件来实现。在提供的代码示例中，我们看到`ScaleBarSkin.mxml`文件是关键所在。下面是对这个文件的解析： ```xml xmlns:s="library://ns.adobe.com/flex/spark" ...
- **HostComponent元数据**：每个SkinClass都需要通过元数据标签来指定其HostComponent，即该皮肤适用的组件类型。 ```xml <![CDATA[ [HostComponent("spark.components.Button")] ]]> ``` - **States**...
`[HostComponent("spark.components.Button")]`元数据声明告诉Flex此皮肤是为spark.components.Button组件设计的。 接下来，我们定义了四个状态：up（鼠标未按下时的状态）、over（鼠标悬停时的状态）、down（鼠标...
这些元素在React内部被转换为Fiber节点，具有不同的类型，例如`HostComponent`（宿主元素）、`ClassComponent`（类组件）等。Fiber节点的类型不仅限于这两种，还包括多种其他类型，如`HostRoot`（根节点）等。 解析...
对于`HostComponent`和`HostText`类型的Fiber节点，它们分别代表React组件中的DOM元素和纯文本。在首次渲染时，React会为这些节点创建对应的DOM实例，并将它们存储在Fiber节点的`stateNode`属性上。而在后续的更新...
对于`HostComponent`（即原生DOM元素），React会直接比较新旧props来决定是否需要重新渲染。 在所有工作单元解析完成后，`workInProgress`树构建完毕，React会进行reconciliation过程，比较`current`树和`...
export class HostComponent { @ViewChild('dynamic', { read: ViewContainerRef }) container: ViewContainerRef; createComponent(componentFactory) { this.container.clear(); const componentRef = this....