无法移动基于 HGroup 的自定义组件

Question

我创建了一个基于 spark 的自定义组件。 Components.HGroup 它主要根据需要工作，但我有一个小问题：我无法移动它。

也许有人会看看下面我的简化测试用例并发现我的错误？

这是我的 3 个自定义组件的屏幕截图，代表聊天气泡：

这是我的自定义组件Bubble.mxml 在绿色背景上绘制黑色文本：

<?xml version="1.0" encoding="utf-8"?>
<s:HGroup 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    gap="0"
    creationComplete="init(event)">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private static const PAD:uint = 10;
            private static const BGCOLOR:uint = 0xCCFFCC;
            private static const BGALPHA:Number = 0.8;

            private var _timer:Timer = new Timer(600, 20);

            public function init(event:FlexEvent):void {
                _timer.addEventListener(TimerEvent.TIMER, fadeBubble);
                _timer.addEventListener(TimerEvent.TIMER_COMPLETE, hideBubble);
                addEventListener(MouseEvent.CLICK, hideBubble);
            }

            public function set text(str:String):void {
                _text.text = str;

                if (x > 100 && x < 200) {
                    _left.visible = true;
                    _right.visible = false;
                } else {
                    _left.visible = false;
                    _right.visible = true;
                }

                visible = true;
                alpha = 1.0;

                _timer.reset();
                _timer.start();
            }


            public function get text():String {
                return _text.text;
            }

            private function fadeBubble(event:TimerEvent):void {
                if (_timer.currentCount * 2 > _timer.repeatCount)
                    alpha /= 2;
            }

            // the argument could be TimerEvent or MouseEvent
            public function hideBubble(event:Event):void {
                visible = false;
                _timer.stop();
            }           
        ]]>
    </fx:Script>

    <s:Graphic id="_left" visible="false">
        <s:Path data="M 20 10 L 0 20 L 20 30">
            <s:fill>
                <s:SolidColor color="{BGCOLOR}" alpha="{BGALPHA}" />
            </s:fill>
        </s:Path>
    </s:Graphic>

    <s:Label id="_text" width="100%" 
             paddingTop="{PAD}" paddingBottom="{PAD}" 
             paddingLeft="{PAD}" paddingRight="{PAD}" 
             fontSize="24" textAlign="center" 
             backgroundColor="{BGCOLOR}" backgroundAlpha="{BGALPHA}" />

    <s:Graphic id="_right" visible="false">
        <s:Path data="M 0 10 L 20 20 L 0 30">
            <s:fill>
                <s:SolidColor color="{BGCOLOR}" alpha="{BGALPHA}" />
            </s:fill>
        </s:Path>
    </s:Graphic>

</s:HGroup>

这是我的文本应用程序 Test.mxml，它使用绝对定位：

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:comps="*"
    width="700" height="525">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private static const AVATAR:String = 
                'http://preferans.de/images/70x90/male_happy_70x90.png';

            public static function randRange(from:int, to:int):int {
                return from + Math.round((to - from) * Math.random());
            }

            public function chat(event:FlexEvent):void {
                _bubble0.y = 340 + randRange(-20, 20);
                _bubble1.y = 4 + randRange(0, 40);
                _bubble2.y = 4 + randRange(0, 40);

                trace('_bubble0.y = ' + _bubble0.y);
                trace('_bubble1.y = ' + _bubble1.y);
                trace('_bubble2.y = ' + _bubble2.y);

                _bubble0.text = _chat.text;
                _bubble1.text = _chat.text;
                _bubble2.text = _chat.text;

                _chat.text = '';
            }
        ]]>
    </fx:Script>

    <s:Image id="_user0" source="{AVATAR}" horizontalCenter="20" y="340" width="160" height="140" />
    <s:Image id="_user1" source="{AVATAR}" left="4" top="4" width="160" height="140" />
    <s:Image id="_user2" source="{AVATAR}" right="4" top="4" width="160" height="140" />

    <comps:Bubble id="_bubble0" maxWidth="200" x="20" y="340" />
    <comps:Bubble id="_bubble1" maxWidth="200" left="170" top="4" />
    <comps:Bubble id="_bubble2" maxWidth="200" right="170" top="4" />

    <s:TextInput id="_chat" bottom="4" right="4" enter="chat(event)" text="Hello!" />
</s:Application>

在调试控制台中，我确实看到了不同的 y 坐标：

_bubble0.y = 350
_bubble1.y = 31
_bubble2.y = 36

_bubble0.y = 340
_bubble1.y = 43
_bubble2.y = 15

但是在屏幕上他们永远不会改变！

Answer 1

问题是 _bubble1 和 _bubble2 的定位受到约束 (left="170" top="4" ）。 Flex 会忽略 x 和 y 属性，因为约束的优先级高于 x 和 y 的绝对定位。
尝试从两个组件中删除 left="170" top="4"，您会看到它们按预期更改位置。

希望这有帮助，

布莱兹