显示Spark列表为空的消息

Question

对不起,这可能是一个非常容易回答的问题,但在Flex中如何在Spark List组件中显示一条消息,指出List为空.例如,如果我有一个显示未完成作业数量的列表,如果我的列表为空,那么我希望列表中显示一条消息,指出"没有要执行的作业".

我宁愿不使用Item Renderer,因为那时它是一个Item(列表不为空)并且可以选择该项.

这似乎应该是非常微不足道的,我希望它是.

菲利,提前谢谢

Answer 1

您可以使用仅在数据提供者没有项目时才会显示的叠加层,如下所示:

<s:List dataProvider="{dp}" left="0" right="0" top="0" bottom="0" />

<s:Group id="emptyMsgBox" left="0" right="0" top="0" bottom="0" alpha=".7"
         visible="{!dp.length}" includeInLayout="{!dp.length}">

    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor color="0x000000" />
        </s:fill>
    </s:Rect>

    <s:Label text="no items in list" color="0xffffff" 
             verticalCenter="0" horizontalCenter="0" />
</s:Group>

您还可以使用状态而不是'visible','includeInLayout'和'dp.length'之间的绑定

编辑:如果您希望在所有List组件中使用此行为,则可以为List创建自定义外观,如下所示:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"> 

    <fx:Metadata>
        [HostComponent("spark.components.List")]
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1"/>
        </s:stroke>
    </s:Rect>

    <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
        <s:fill>
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>

    <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" 
                minViewportInset="1" hasFocusableChildren="false">

        <s:DataGroup id="dataGroup" 
                     itemRenderer="spark.skins.spark.DefaultItemRenderer">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="contentJustify" 
                                  requestedMinRowCount="5" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>

    <s:Group id="emptyMsgBox" left="0" right="0" top="0" bottom="0" alpha=".7"
             visible="{!dataGroup.dataProvider.length}" 
             includeInLayout="{!dataGroup.dataProvider.length}">

        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:fill>
                <s:SolidColor color="0x000000" />
            </s:fill>
        </s:Rect>

        <s:Label text="no items in list" color="0xffffff" 
                 verticalCenter="0" horizontalCenter="0" />
    </s:Group>

</s:Skin>

这是皮肤类的精简版本,但总结一下:您所做的就是将叠加组添加到原始Spark ListSkin中,其方式与上一示例完全相同.使用CSS将其应用于所有List组件:

s|List {
    skinClass: ClassReference("my.custom.skin.ListSkin");
}