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

Posted 2023-02-23

【中文标题】如何在 Flex 中查找对象的样式继承？

【英文标题】：How to look up the style inheritance for an object in Flex?

【发布时间】：2012-08-13 04:46:46

【问题描述】：

我想知道哪些 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 字体大小 - 12 文本对齐 - 左 等等

然后我可以找出样式的价值来自哪里：

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

【问题讨论】：

我从未尝试在运行时了解所有样式继承，但肯定有办法做到这一点。无论如何，我建议您阅读 Adob​​e Flex 4.6 帮助文档：help.adobe.com/en_US/flex/using/…。在那里，它解释了如何应用继承以及它应该如何工作。这可以为您提供实现符合您要求的内容的线索。

【参考方案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;
 

【讨论】：

我不知道该怎么办。我正在寻找一些创建和对象的代码，这些代码向我展示了这样的东西（上面发布）。

【参考方案2】：

您可以通过使用静态 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>

【讨论】：

显示该对象具有的样式和值，但不显示如何查找样式继承（值来自或拥有的位置）。