Actionscript 3 Flex HGroup中的拖动区域小于组本身

我有一个要将元素拖到其上的HGroup。为了设计HGroup的样式，它实际上是一个包含Rect和HGroup的组

此代码中的拖动区域仅与组中当前的元素一样大（这就是为什么我在其中放置了一个按钮来测试它）。如您所见，我已经手动设置了组和HGroup的宽度。一切都报告它自己应该是300宽，但拖动区域只保留与HGroup中元素数量相同的大小。这让我觉得HGroup实际上并不是它所报告的那样（它在设置属性后通过访问

.width

属性报告300）。Rect的宽度为300，因此我可以看到放置区域应该是什么

我觉得我肯定做错了什么，但我看不出来。任何想法都将不胜感激

编辑：我想知道是否存在某种掩蔽问题。在矩形上添加drag-enter事件（我知道它的大小是正确的，正如我所看到的）也不会导致触发enter事件。我怎么才能知道呢

package components
{
    import mx.core.IUIComponent;
    import mx.events.DragEvent;
    import mx.graphics.SolidColor;
    import mx.managers.DragManager;

    import spark.components.Group;
    import spark.components.HGroup;
    import spark.components.VGroup;
    import spark.primitives.Rect;


    public class TestVerticalConstraintExpression extends Group
    {
        private var expressions:VGroup;
        private var topExpression:Group;
        private var locked:Boolean = false;

        public function TestVerticalConstraintExpression()
        {
            super();

            this.width = 300;

            expressions = new VGroup();
            expressions.width = 300;

            this.addElement(getBackground());

            topExpression = new HGroup();

            expressions.addElement(topExpression);

            this.addElement(getBackground());
            this.addElement(expressions);

            topExpression.width = 300;
            topExpression.height = 50;
            topExpression.addElement(new ConstraintButton());

            // Setup listeners for when things are dropped onto the expression group
            topExpression.addEventListener(DragEvent.DRAG_ENTER,
                dragEnterHandler);
        }

        protected function getBackground():Rect
        {
            var bg:Rect = new Rect();
            bg.fill = new SolidColor(Math.round(Math.random()*0xFFFFFF));
            bg.left = 0;
            bg.right = 0;
            bg.top = 0;
            bg.bottom = 0;
            bg.percentWidth = 100;
            bg.percentHeight = 100;

            return bg;
        }

        protected function dragEnterHandler(event:DragEvent):void {
            DragManager.acceptDragDrop(event.currentTarget as IUIComponent);
        }
    }
}

---

组

本质上只是一个布局容器。它没有任何图形元素，因此它是完全透明的，除非您将

约束按钮

，这就是为什么您只能放置在该

约束按钮

，而在

HGroup

中没有其他位置

因此，您必须使用与您的HGroup大小相同的图形元素创建“hitzone”。它的

alpha

属性可能设置为

0

，这样您就看不到它，但仍然可以与它交互。我能想到的两个最简单的方法：

• 将您的

  HGroup

  转换为带有

  水平布局的
  边界容器

• 将

  HGroup

  与背景

  Rect

  一起放入

  Group

  中；大概是这样的：

---

也就是说，为什么要在ActionScript中编写“视图”？它使代码变得更加冗长（即更多的工作）并且更难阅读。更不用说你会犯错误，比如在主

组中添加两次背景
Rect
，如果你的代码是用MXML编写的，你会立即发现这些错误。

也许更重要的是：因为您将子组件创建代码放在主类的构造函数中，所以您的代码实际上会导致性能损失。如果你想用纯ActionScript编写组件，你必须了解Flex组件的生命周期。MXML为您处理所有这些细节。

如果您担心混合使用MXML和ActionScript，您应该阅读Spark蒙皮体系结构。（举个例子，你可以查看这个使用Spark蒙皮的答案：）。
我刚开始使用AS，我对MXML文件和组件之间的关系感到困惑，但你说得很对，反正我正要将其重构为MXML！谢谢你的回答，把rect放在小组里看起来应该很有效。
<s:Group id="topExpression">
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor alpha="0" />
        </s:fill>
    </s:Rect>

    <s:HGroup id="yourOldTopExpression" left="0" right="0" top="0" bottom="0" />
</s:Group>