Flex項目渲染器 - 如果爲null，不包含元素？

Question

我有項目渲染這樣的代碼：

<s:HGroup> 
    <s:Label text="{data.DateTime}"/> 

    <s:VGroup> 
     <s:Label text="{data.Description}"/> 
     <s:Label text="{data.Amount}"/> 
    </s:VGroup> 
</s:HGroup> 

說明是可選字段。如果說明字段爲空的金額字段向上移動，我想，但就目前來說，只是一個空的空間。有沒有辦法在mxml中實現這一點？我希望他們在不同的領域，因爲我打算使說明可編輯，但金額固定。

Answer 1

我寫了一個簡單的應用程序來模擬Item渲染器的行爲。 訣竅是使用可見和includeInLayout性質：

<?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" minWidth="955" minHeight="600" 
       creationComplete="application1_creationCompleteHandler(event)" 
       > 

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

      [Bindable] 
      private var data:Object; 

      protected function application1_creationCompleteHandler(event:FlexEvent):void 
      { 
       var newData:Object = new Object(); 
       newData.DateTime = new Date(); 
       newData.Description = "Description"; 
       newData.Amount = 12345; 
       data = newData; 
      }   


      protected function setNull_clickHandler(event:MouseEvent):void 
      { 
       var newData:Object = new Object(); 
       newData.DateTime = new Date(); 
       newData.Description = null; 
       newData.Amount = 12345; 
       data = newData; 

      } 


      protected function setValue_clickHandler(event:MouseEvent):void 
      { 
       var newData:Object = new Object(); 
       newData.DateTime = new Date(); 
       newData.Description = "Description"; 
       newData.Amount = 12345; 
       data = newData; 
      } 

     ]]> 
    </fx:Script> 


    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 


    <s:VGroup> 
     <s:HGroup> 
      <s:Button id="setNull" label="Set Null" click="setNull_clickHandler(event)"/> 
      <s:Button id="setValue" label="Set Description" click="setValue_clickHandler(event)"/> 
     </s:HGroup> 
     <s:Label text="Renderer"/>  
     <s:HGroup> 
      <s:Label text="{data.DateTime}"/> 
      <s:VGroup> 
       <s:Label text="{data.Description}" 
         visible="{data.Description != null}" 
         includeInLayout="{data.Description != null}" 
         /> 
       <s:Label text="{data.Amount}" /> 
      </s:VGroup> 
     </s:HGroup> 
    </s:VGroup> 
</s:Application>