list - 显示 Spark List 为空的消息

Question

抱歉，这可能是一个非常容易回答的问题，但在 Flex 中，我如何才能在 Spark List 组件中显示一条消息，指出该 List 为空。例如，如果我有一个显示未完成工作数量的列表，如果我的列表为空，那么我希望在整个列表中显示一条消息，说明“没有要执行的工作”。

我宁愿不使用项目渲染器，因为它是一个项目(列表不为空)并且可以选择该项目。

这看起来应该是非常微不足道的，我希望是这样。

提前致谢， 菲尔

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' 之间的绑定(bind)

编辑:如果您希望所有 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");
}