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

Question

我有一个 HGroup，我想将元素拖到上面。为了设置 HGroup 的样式，它实际上是一个包含 Rect 和 HGroup 的 Group。

此代码中的拖动区域仅与当前组中的元素一样大（这就是为什么我在其中放置一个按钮来测试它的原因）。如您所见，我手动设置了 Group 和 HGroup 的宽度。一切都报告自己是 300 宽，应该是这样，但拖动区域仍然只有 HGroup 中元素的数量。这让我觉得 HGroup 实际上并不是它所报告的（它报告 300 在设置后访问 .width 属性）。 Rect 的宽度适当为 300，因此我可以看到放置区域应该是什么。

我觉得我一定在做一些非常明显的错误，但我看不到。任何想法将不胜感激！

编辑：我想知道是否存在某种掩蔽问题。在矩形上添加一个拖动输入事件（我知道这是正确的大小，正如我所看到的）也不会导致输入事件触发。我怎么能找到这个？

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

Answer 1

Group 本质上只是一个布局容器。它没有任何图形元素，因此它是完全透明的，除了你放置 ConstraintButton 的位置，这就是为什么你只能放在 ConstraintButton 而不能放在 HGroup 的其他位置。

因此，您必须使用与您的 HGroup 大小相同的图形元素创建“命中区”。它可能将其alpha 属性设置为0，这样您就看不到它，但仍然可以与之交互。我能想到的两种最简单的方法：

• 使用Horizontallayout 将您的HGroup 转换为BorderContainer
• 将HGroup 和背景Rect 放在Group 中；像这样：

。

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

---

也就是说，为什么要在 ActionScript 中编写“视图”？它使代码更加冗长（即更多的工作）并且更难阅读。更不用说你犯了错误，比如将背景Rect 两次添加到主Group，如果你的代码是用 MXML 编写的，你会立即发现。
也许更重要的是：因为您将子组件创建代码放在主类的构造函数中，您的代码实际上会导致性能损失。如果您想用纯 ActionScript 编写组件，您必须了解并理解 Flex 组件的生命周期。 MXML 为您处理所有这些细节。
如果您担心混淆 MXML 和 ActionScript，您应该阅读 Spark 皮肤架构。 （例如，您可以查看使用 Spark 皮肤的这个答案：Custom Composite Control not rendering correctly for only 0.5-1 sec after being added back into a VGROUP）。