Question

我有一个自定义组件，它有一些Canvas，并为它们分配了一些背景颜色。现在我对颜色进行了硬编码，我想将它们移动到外部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

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

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自定义组件

2 个答案: