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

Question

我有一个自定义组件 ExpandCollapseMenu，它扩展了 SkinnableContainer。该组件的状态可以是“正常”或“扩展”。
在这个组件内部，我有按钮，根据 ExpandCollapseMenu 的状态具有不同的外观。
这在 ExpandCollapsMenu 的皮肤类中定义按钮时效果很好：

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

这是根据父容器状态更改皮肤的好方法吗？还是有更好的办法？

Answer 1

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

所以我建议为 ExpandCollapseMenuButton 引入扩展:Boolean 标志。

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

1. 检查迭代过程中的组件是否为 ExpandCollapseMenuButton 实例（使用 is 运算符）。

2. 引入如下简单的可扩展界面：

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

并通过 ExpandCollapseMenuButton 实现此接口。所以你可以在没有 ExpandCollapseMenuButton 依赖的情况下更灵活地在迭代器主体中使用 is 运算符。

所以拼图的最后一部分是在 ExpandCollapseMenuButton 类中实现 setter 并切换皮肤：

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;
   }
}