Question

我有一个扩展 SkinnableContainer 的自定义组件 ExpandCollapseMenu 。该组件可以具有“正常”或“扩展”状态在这个组件里面我有按钮，根据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引入expand：Boolean标志。

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

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

介绍简单的可扩展界面，如下所示：

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

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

1 个答案: