Question

当backgroundImage为空时，如何在List上显示List？

目前，在拖放后删除项目时会填充列表，但我更倾向于使用一种解决方案来检查数据的任何更改，以确定列表是否为空。

List从backgroundImage继承了ScrollControlBase，但是当列表为空时会出现最佳方式，并且在添加项目时会消失。

有什么建议吗？

谢谢！

Answer 1

过去，我已经用组件的状态完成了它。在您的自定义组件中，快速而肮脏的示例将是这样的：

<mx:List currentState="{(listItemsDataProvider.length > 0) ? 'HasItemsState' : 'NoItemsState'}">

// anything else you need

</mx:List>

当然在组件中创建这些状态，NoItemsStates更改背景图像，或者如果您的组件是容器，如Canvas，那么您可以让状态不显示{{1}毕竟。

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable] public var listItems:ArrayCollection = new ArrayCollection();

            private function removeAllItemsFromList():void
            {
                this.listItems.removeAll();
                backgroundCheck()
            }

            private function addItemToList():void
            {
                this.listItems.addItem({data:null,label:"test"});
                backgroundCheck()
            }

            private function backgroundCheck():void
            {
                if(this.listItems.length>0)
                {
                    this.myList.setStyle("backgroundImage", null)
                }
                else
                {
                    this.myList.setStyle("backgroundImage", "me.png")
                }               
            }
        ]]>
    </mx:Script>
    <mx:VBox width="100%" height="100%">
        <mx:List id="myList" width="100%" height="100%" backgroundImage="me.png" dataProvider="{this.listItems}"/>
        <mx:HBox width="100%">
            <mx:Button id="addItemButton" click="addItemToList()" label="add item"/>
            <mx:Button id="removeItemsButton" click="removeAllItemsFromList()" label="remove all items"/>
        </mx:HBox>
    </mx:VBox>
</mx:Application>

这是我接近它的方法，检查dataProvider长度。在你的情况下，你会在完成放弃时这样做。

Answer 3

您可以扩展List控件并覆盖updateDisplayList（）。如果dataProvider.length == 0，则绘制backgroundImage，然后调用super.updateDisplayList（）以获得正常的List行为。如果需要，这将使新的List控件易于重用。

Answer 4

使用相同的属性，在拥有某些数据时将图像设置为null。您也可以查看自定义ItemRenderers。

在Flex中列表为空时显示的背景图像

4 个答案: