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

我编写了一个简单的应用程序来模拟项目渲染器的行为。
诀窍是使用 visible 和 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>