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

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

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

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

Screenshot

这里我的自定义组件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它使用绝对位置G：

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

在调试控制台我确实看到了不同Ÿ坐标：

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

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

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

来源

2011-10-30 Alexander Farber

这不是明摆着给我什么是错。是否可以发布一个示例项目？或者是否可以提供不带嵌入式图像的可运行代码？ – JeffryHouser

实际上，我准备好的测试用例可以立即运行（只需将2个mxml文件添加到FB 4.5 Web应用程序项目中），图像就不会嵌入。 –

我的不好;我以为你在嵌入图片;但你只是链接到他们。 – JeffryHouser

的问题是，_bubble1和_bubble2被定位约束（左= “170” 顶端= “4”）。 Flex忽略x和y属性，因为约束比x和y的绝对位置具有更高的优先级。尝试从这两个组件删除左=“170”顶部=“4”，你会看到他们如预期的那样改变位置。

希望这有助于

大火

来源

2011-10-30 21:49:59

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

回答

相关问题