将自定义样式属性添加到 MXML 自定义组件

Posted 2023-02-23

【中文标题】将自定义样式属性添加到 MXML 自定义组件

【英文标题】：Add custom style property to MXML Custom Component

【发布时间】：2011-09-20 07:17:48

【问题描述】：

我有一个自定义组件，它有几个 Canvas 并分配了一些背景颜色。现在我已经对颜色进行了硬编码，我想将它们移动到外部 css 文件中。

所以我希望有这样的 css 声明：

ControlBar  
  
  dividerRightColor: #ffffff;  
  dividerLeftColor: #f3f3f3;  

我的问题是我是否可以定义自定义样式名称，如dividerRightColor，如果可以，我如何在我的 MXML 组件中使用该值？我已经看到在 Pure AS 组件中使用它们的示例。

【参考方案1】：

在 CSS 中：

.dividerRightColor 
    background-color: #ffffff;



.dividerLeftColor 
    background-color: #f3f3f3;

在 MXML 中：

<mx:ControlBar>
    <mx:Canvas styleName="dividerLeftColor">
        …
    </mx:Canvas>

    <mx:Canvas styleName="dividerRightColor">
        …
    </mx:Canvas>
</mx:ControlBar>

【讨论】：

我正在使用这种方法，因为它很简单，可以满足我的要求。但两者都是很好的答案。

【参考方案2】：

听起来你需要在组件中创建样式；不仅仅是将样式值作为另一个答案发送到组件中。

Read this documentation.

基本上，样式的定义方式与属性的定义方式不同。您可以在所需的组件上设置任何样式名称。但是，组件需要知道使用样式做什么。为此，您需要重写 styleChanged 方法：

override public function styleChanged(styleProp:String):void 

    super.styleChanged(styleProp);

    // Check to see if style changed. 
    if (styleProp=="dividerRightColor") 
    
      // do stuff to implement the style
      dividerRight.setStyle('backgroundColor',getStyle('dividerRightColor'));
    

一种常见的方法是设置“styleChanged”属性并使显示列表无效，然后在 updateDisplayList() 方法中进行适当的样式更改。

要使样式在代码提示中可用，您需要添加元数据，如下所示：

[Style(name="dividerRightColor")]

仅当您希望将样式设置为 MXML 中的属性时才需要这样做。

【讨论】：

如果我在我的 MXML 文件的脚本部分添加此代码，此功能是否也可以工作？

如果将 styleChanged 方法添加到 MXML 文件的脚本部分，它应该可以正常工作。我相信样式元数据必须放在 mx:Metadata 标记内。 [可能在 Flex 4 中有所不同]