Question

我想知道什么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 - left
等

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

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如何为您提供所选对象的样式信息：

enter image description here

例如：

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");

Answer 1

您可以创建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;
}

Answer 2

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

演示： 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>

如何在Flex中查找对象的样式继承？

2 个答案: