Flex 在运行时更改 css 属性

Question

我正在用 flex 开发一个仪表板应用程序，它是 flex dashboard 的副本。这里有多个面板显示不同的内容。我想要的是每当用户点击任何特定面板说例如“年度收入”时，我只想突出显示该特定面板。

所以基本上所有处于初始状态的面板都处于“非活动”状态，但一旦用户点击它，它就会变为活动状态，为用户提供更好的体验，让用户知道他正在使用“xyz”面板并保持将进入非活动状态。

所以我所说的“活动”和“非活动”状态是指，在任何 HTML 页面中，当我们将鼠标悬停在任何超链接上时，它会变为“蓝色”（例如），因此我将其称为活动和非活动状态。

现在，谈谈面板。

面板具有定义其布局的皮肤。为了满足我的要求，我尝试将“css”应用于面板。现在我以这种方式应用了 css

 public class Pod extends Panel
    {
      ...properties
         public function init():void
         {
             setStyle('styleName',"panelOff"); 
         }
    }

现在，在这个类中，我正在处理面板上的“CLICK”。所以在点击事件中我所做的基本上是，

setStyle('styleName',"panelOn"); 

由于面板应用了皮肤，我需要更改皮肤中包含的组件的属性。这样我就必须能够访问皮肤中的 css 属性。

在皮肤文件中我正在做这样的事情

override protected function updateDisplayList(unscaledWidth:Number,
                                                        unscaledHeight:Number):void
{                     
    setStyle('border-alpha', hostComponent.getStyle('border-alpha'));
}

所以我的问题是，这是满足我要求的正确方法吗？

如何访问皮肤中主机组件的 css 属性 班级 ？

在我的 main.mxml 中，我定义了样式文件。因此，如果 样式文件包含一个名为“panelOn”的样式类，如果我给它 类到面板，所以它能够访问相关的样式 那个班？

请不要建议使用面板的 setStyle 方法放置每个 css 属性，因为这样对我来说使用 css 文件没有任何好处，而且 css 样式也很糟糕。

如果还有其他更好的解决方案，请分享您的看法。我希望我很清楚。任何帮助将不胜感激。

Answer 1

满足您要求的最佳方式 - 使用火花状态。面板组件和 Mxml 皮肤，有两种状态：活动和非活动（或您的新状态）。面板组件具有设置当前皮肤状态的逻辑。如果您想使用 css 来保存属性，则每个州都应用自己的样式名称作为皮肤。

主要应用：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
               xmlns:classes="classes.*">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace classes "classes.*";

        classes|Pod
        {
            skinClass : ClassReference("skins.PodSkin");
        }

        .active
        {
            backgroundColor: #ff0000;
        }

        .inactive
        {
            backgroundColor: #00ff00;
        }

    </fx:Style>

    <classes:Pod x="800" width="300" height="300" />
</s:Application>

Pod 组件：

package classes
{
    import flash.events.MouseEvent;

    import spark.components.Panel;

    public class Pod extends Panel
    {

        private var _isActive:Boolean = false;

        public function Pod()
        {
            super();
        }

        override protected function childrenCreated():void 
        {
            super.childrenCreated();

            addEventListener(MouseEvent.CLICK, onClickHandler, false, 0, true);
        }

        protected function onClickHandler(event:MouseEvent):void
        {
            _isActive = !_isActive;

            invalidateSkinState();
        }

        override protected function getCurrentSkinState():String
        {
            if (_isActive)  return "active";

            return "inactive";
        }
    }
}

以及您为每个状态设置样式名称的 PodSkin mxml 皮肤的一部分：

    <s:SparkSkin 
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
        blendMode="normal" mouseEnabled="false" 
        styleName.active="active" styleName.inactive="inactive"
        minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<s:states>
    <s:State name="normal" />
    <s:State name="active" />
    <s:State name="inactive" />
    <s:State name="disabled" />
    <s:State name="normalWithControlBar" stateGroups="withControls" />
    <s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>

享受弹性