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

Question

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

所以我想要这样的 css 声明：

ControlBar  
{  
  dividerRightColor: #ffffff;  
  dividerLeftColor: #f3f3f3;  
}

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

Answer 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>

Answer 2

在我看来，您需要在组件中创建样式；不仅仅是将样式值作为其他答案发送到组件中。

阅读此文档。

基本上，样式的定义方式与属性的定义方式不同。您可以在所需的组件上设置任何样式名称。然而，组件需要知道如何使用样式。为此，您需要重写 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 中的属性时才需要这样做。