Apache flex Flex 4外观：根据父容器状态更改外观

我有一个扩展SkinnableContainer的自定义组件ExpandCollapseMenu。此组件的状态可以为“正常”或“扩展”。
在这个组件中，我有按钮，根据ExpandCollapseMenu的状态使用不同的皮肤。
在ExpandCollapsMenu的skin类中定义按钮时，此操作非常有效：

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

---

这是基于父容器状态更改外观的好方法吗？还是有更好的方法？

我建议您在ExpandCollapseMenu容器级别上解决此问题。当ExpandCollapseMenu的状态更改时，您应该迭代子项并为每个子项设置一些标志

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

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

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

引入简单的可扩展界面，如下所示：

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

并通过ExpandCollapseMenuButton实现该接口。所以，您可以更灵活地在迭代器体中使用is运算符，而无需ExpandCollapseMenuButton依赖项

因此，谜题的最后一部分是在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种状态。它的灵感来自于。因为你不能有多个状态，另一种选择是所有置换（8个状态），这在我看来是一种黑客行为。孩子们选择基于标准CSS的皮肤，他们的父母不会告诉他们（至少在最后一个版本中，我描述的第一个版本中你可能是对的）。ExpandCollapseMenu根据子项获取其大小，因此我不知道子项如何检查其大小以确定其状态？请注意，所有按钮同时显示其宽版本，而不仅仅是您正在交互的按钮。谢谢Constantiner。是的，除了ExpandCollapseMenuButtons之外，还会有其他实例，如切换按钮、按钮组、滑块等。但正如您所说，这可以通过一些通用方式解决，例如界面。

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

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