代码之家 › 专栏 › 技术社区 › lpfavreau Arthur Debert

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

list image actionscript-3 flex

lpfavreau Arthur Debert · 技术社区 · 16 年前

我如何显示 backgroundImage 在一 List 当 表 是空的吗?

当项目在拖放后被放入时,此时列表被填充,但我更喜欢检查数据的任何更改以确定列表是否为空的解决方案。

这个 表 继承一 背面图像 从其 ScrollControlBase 但是,当列表为空并且在添加项时消失时,最好的方法是什么?

有什么建议吗?

谢谢!

4 回复 | 直到 16 年前

Todd 16 年前

在过去,我对组件的状态进行了处理。在自定义组件中,快速而肮脏的示例如下:

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

// anything else you need

</mx:List>

当然,在组件中创建这些状态时,noitemsstates会更改背景图像,或者如果组件是容器,例如 Canvas ,则可以让状态不显示 List 完全。

Joel Hooks 16 年前

<?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>

这就是我将如何处理它,检查数据提供程序的长度。在您的情况下,您可以在完成放置后执行此操作。

cliff.meyers 16 年前

可以扩展列表控件并重写UpdateDisplayList()。如果dataProvider.length==0,则绘制backgroundImage,否则调用super.updateDisplayList()以获取正常的列表行为。如果需要,这将使新的列表控件易于重用。

dirkgently 16 年前

使用相同的属性,当您有一些数据时,将图像设置为空。你可以看看定制的 ItemRenderers 也。