Flex：为什么SpriteVisualElement不遵循布局？

Question

在下面的代码中，我在垂直布局中的滑块之前添加了一个SpriteVisualElement。每当我编译并运行时，滑块总是将自己定位在精灵元素的前面，而不是在它下面。这是一个闪存错误还是我做错了什么？任何解决这个问题的方法？

<s:layout> 
    <s:VerticalLayout/> 
</s:layout> 
<s:SpriteVisualElement id="container" includeInLayout="true"/> 
<s:HSlider/> 

<fx:Script> 
    <![CDATA[ 
     import mx.events.FlexEvent; 
     protected function creationComplete_handler(event:FlexEvent):void 
     { 
      var canvas:Shape = new Shape(); 
      canvas.graphics.lineStyle(1,0); 
      canvas.graphics.beginFill(0); 
      canvas.graphics.drawRect(0,0,480,360); 
      canvas.graphics.endFill(); 
      container.addChild(canvas); 
     } 
    ]]> 
</fx:Script> 

Answer 1

那是因为你的SpriteVisualElement没有一个尺寸。它的width和height是0。您仍然可以看到黑色方块，因为它溢出了，但没有进行测量，因为它是纯粹的ActionScript图形。

因此，要解决您的问题简单地给container大小：

<s:SpriteVisualElement id="container" width="480" height="360" /> 
<s:HSlider/> 

includeInLayout是true默认。

---

如果你想要做的是，虽然画一些形状，你最好使用FXG了点。例如您的矩形将成为这样的事情：

<s:Rect width="480" height="360"> 
    <s:fill> 
     <s:SolidColor color="0xff0000" /> 
    </s:fill> 
    <s:stroke> 
     <s:SolidColorStroke color="0x00ff00" weight="1" /> 
    </s:stroke> 
</s:Rect> 
<s:HSlider/>