2

我想知道哪些 CSS 样式正在影响我的 UIComponent 以及从何处影响。

所以解决方案将列出给定组件的样式和值：

<s:Label id="myLabel" />

<s:Group id="myLabel" fontFamily="Tahoma"/>
    <s:Label id="myOtherLabel" />
</s:Group>

然后代码：

var styles:Object = StyleManager.getStyles(myLabel);
trace(styles);

fontFamily - Arial
颜色 - 0
fontSize - 12
textAlign - 左
等

然后我可以找出风格从哪里获得它的价值：

var styleParent:Object = StyleManager.getStyle(myLabel, "fontFamily");
trace(styleParent); // "s|Label" declaration or global?

并且样式查找：

var styleParents:Array = StyleManager.getStyleInheritence(myOtherLabel, "fontFamily");
trace(styleParent); // inline which overrides "s|Group fontFamily" which overrides "s|Label" which overrides global

当我说覆盖时，我的意思是特异性。内联 fontFamily 声明比标签父组上的内联 fontFamily 声明更具体，后者比 s|Label 类型声明更具体，后者比全局 fontFamily 声明更具体。

此图像让您了解 Firebug 如何为您提供所选对象的样式信息：

在此处输入图像描述

例如： 

var myInheritenceChain:Array = getStylesInheritanceForTarget(myButton);

trace(myInheritanceChain); // output is an array of 

[0] {subject:instance, type:inline, styles: {fontFamily:"Noteworthy", color:"blue"}
[1] {subject:spark.components.Button, type:type, styles: {fontFamily:"Bidoni", color:"red"...}
[2] {subject:#myButton, type:id, styles: {fontFamily:"Futura", color:"green"}
[3] {subject:.myClassStyle, type:class, styles: {fontFamily:"Times New Roman", color:"yellow"...}
[4] {subject:global, type:something, styles: {fontFamily:"Helvetica", color:"black"...}
[5] {subject:*, type:something, styles: {fontFamily:"Bauhaus", color:"black"...}

这样您就可以看到为什么以及如何将样式（例如 fontFamily）设置为它设置的值，如下所示： 

var myInheritenceChain:Array = getStylesInheritanceForTarget(myButton, "fontFamily");
4

2 回答 2

0

您可以创建package mx.styles. 复制到这个包文件 StyleProtoChain、CSSStyleDeclaration、CSSMergedStyleDeclaration 并实现你在这个类中需要的功能。

例如，您可以覆盖

override mx_internal function addStyleToProtoChain(chain:Object,
                                          target:DisplayObject,
                                          filterMap:Object = null):Object
{
    // If we have a local style, then add only it to the chain. It will
    // take are of adding its parent to the chain.
    // If then is no style, but a parentStyle, then add the parent Style
    // to the chain.
    if (style)
        return style.addStyleToProtoChain(chain, target, filterMap);
    else if (parentStyle)
        return parentStyle.addStyleToProtoChain(chain, target, filterMap);
    else
        return chain;
}
于 2012-09-12T15:09:02.163 回答
0

您可以使用静态 ObjectUtil.toString() 方法来调试组件的继承样式，以显示组件的继承样式属性。

演示： http ://blog.flexexamples.com/2007/12/24/displaying-a-combobox-controls-inherited-styles-in-flex/

<mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            private function init():void {
                textArea.text = ObjectUtil.toString(comboBox.inheritingStyles);
            }
        ]]>
    </mx:Script>
于 2012-09-17T14:37:43.857 回答