Flex 4皮肤：根据父容器状态更改皮肤

我有一个自定义组件ExpandCollapseMenu延伸SkinnableContainer。该组件可以具有“正常”或“扩展”状态。
在这个组件中，我有一些按钮，其中不同皮肤基于ExpandCollapseMenu的状态。
这个定义ExpandCollapsMenu的皮肤类中的按钮时正常工作：Flex 4皮肤：根据父容器状态更改皮肤

<s:Group id="contentGroup" top="20" left="10" right="10" bottom="10"> 
    <s:layout> 
     <s:VerticalLayout/> 
    </s:layout> 

    <component:ExpandCollapseMenuButton label="Foo" skinClass.expanded="component.ExpandCollapseMenuButtonExpandedSkin" skinClass.normal="component.ExpandCollapseMenuButtonSkin" /> 

</s:Group>

但我不想定义ExpandCollapsMenu的皮肤类中的按钮，我想在这里我用ExpandCollapseMenu来定义它们。就像这样：

<component:ExpandCollapseMenu skinClass="component.ExpandCollapseMenuSkin"> 
    <component:ExpandCollapseMenuButton label="Foo" /> 
</component:ExpandCollapseMenu>

在这个层面上，我不能引用skinclass.expanded，但我得到它通过使用CSS像这样的工作：

component|ExpandCollapseMenu:expanded component|ExpandCollapseMenuButton { 
    skinClass: ClassReference("component.ExpandCollapseMenuButtonExpandedSkin"); 
} 
component|ExpandCollapseMenu:normal component|ExpandCollapseMenuButton { 
    skinClass: ClassReference("component.ExpandCollapseMenuButtonSkin"); 
}

这是改变的好方法基于父容器状态的皮肤？或者，还有更好的方法？

来源

2011-03-28 rlovtang

我能问你想要做什么？你的方法非常不规范，我认为可能有更好的方法来做到这一点。 – 2011-03-28 20:02:39

创建一个垂直菜单面板，带有按钮，切换按钮等。所有菜单元素都有一个狭窄而宽阔的状态。鼠标悬停菜单面板=显示所有按钮的宽版本，mouseout =显示窄版。 – rlovtang 2011-03-29 07:21:37

窄版与宽版有何不同？另外，当改变状态时，你为什么要改变皮肤？！你知道Flex皮肤可以有状态吗？它们基于组件状态（可以被覆盖/修改）。我建议你阅读皮肤状态，而不是让孩子们检查他们的大小，以便在父母不需要“告诉”他们之间改变状态。 – 2011-03-29 15:05:03

我建议您在ExpandCollapseMenu容器级别上解决问题。当ExpandCollapseMenu的状态发生变化时，您应该遍历子元素并为其中的每个元素设置一些标志。

所以我建议为ExpandCollapseMenuButton引入expanded：Boolean标志。

如果ExpandCollapseMenu可以包含其他实例的类型，则会出现此问题。在这种情况下，我们可以通过以下两种方式解决这个问题：在迭代的过程中

检查部件，如果他们是ExpandCollapseMenuButton情况下（使用的操作）。

介绍像下面这个简单的扩展接口：

public interface Expandable 
{ 
    function set expanded(value:Boolean); 
}

和落实ExpandCollapseMenuButton此接口。所以你可以使用is运算符在迭代器体中更灵活的方式，而不需要ExpandCollapseMenuButton依赖。

所以拼图的最后部分是实现二传手在ExpandCollapseMenuButton类和切换皮肤：

private var expandedDirty:Boolean; 
private var _expanded:Boolean; 
public function set expanded(value:Boolean) 
{ 
    if (value == _expanded) 
     return; 
    _expanded = value; 
    expandedDirty = true; 
    invalidateProperties(); 
} 

override protected function commitProperties():void 
{ 
    super.commitProperties(); 
    if (expandedDirty) 
    { 
     if (_expanded) 
     setStyle("skinClass", ExpandCollapseMenuButtonExpandedSkin); 
     else 
     setStyle("skinClass", ExpandCollapseMenuButtonSkin); 
     expandedDirty = false; 
    } 
}

来源

2011-03-29 20:57:36 Constantiner

感谢君士坦丁。是的，除了ExpandCollapseMenuButtons之外，还会有其他实例，比如切换按钮，按钮组，滑块等等。但正如您所说，这可以通过一些通用的方式解决，例如。接口。 – rlovtang 2011-03-30 07:42:15

Flex 4皮肤：根据父容器状态更改皮肤

回答

相关问题