Question

我正在尝试使用TileList组件创建缩略图列表，到目前为止它工作得很好。有没有办法改变组件中单个ImageCell的外观。

我将缩略图数据作为XML引入，我有一个关于它是否是“新”图像的属性。我希望它能在我的应用程序中的单个缩略图上显示一个小徽章。

我应该注意到我创建了ImageCell类的子类（实现ICellRenderer）来设置我的自定义皮肤，但是当我尝试在这里添加条件代码时（检查我设置的“new”参数，它根本不起作用（没有错误信息）。

有没有人对如何实现这个有任何想法？

谢谢！

斯科特

Answer 1

您还需要扩展TileListData并添加一个isNew属性。一个快速的解决方法是使用图标属性来存储您的布尔值，因为它是ListData.as中的对象，然后在您的类中，访问它并使用它来切换 NEW的可见性 graphic。

e.g。

package
{
    import fl.controls.listClasses.ICellRenderer;
    import fl.controls.listClasses.ImageCell;
    import fl.controls.listClasses.ListData;
    import fl.controls.listClasses.TileListData;
    import fl.controls.TileList;
    import fl.data.DataProvider;
    import fl.managers.StyleManager;
    import flash.events.EventDispatcher;
    import flash.events.*;
    import flash.display.Sprite;
    import fl.containers.UILoader;

    public class CustomImageCell extends ImageCell implements ICellRenderer
    {  

        protected var isNewGraphic:Sprite;

        public function CustomImageCell() 
        {
            super();

            //do other stuff here

            loader.scaleContent = false;
            loader.addEventListener(IOErrorEvent.IO_ERROR, handleErrorEvent, false, 0, true);
            loader.addEventListener(Event.COMPLETE, handleCompleteEvent, false, 0, true);

            useHandCursor = true;
        }
        override protected function configUI():void {
            super.configUI();
            //add your NEW graphic here
            isNewGraphic = new Sprite();
            isNewGraphic.graphics.beginFill(0x990000,0.75);
            isNewGraphic.graphics.lineTo(10,0);
            isNewGraphic.graphics.lineTo(30,30);
            isNewGraphic.graphics.lineTo(30,40);
            isNewGraphic.graphics.lineTo(0,0);
            isNewGraphic.graphics.endFill();
            addChild(isNewGraphic);
        }

        override protected function drawLayout():void
        {
            var imagePadding:Number = getStyleValue("imagePadding") as Number;
            loader.move(11, 5);

            var w:Number = width-(imagePadding*2);
            var h:Number = height-imagePadding*2;
            if (loader.width != w && loader.height != h)
            {
                loader.setSize(w,h);
            }
            loader.drawNow(); // Force validation!
            //position NEW graphic here
            isNewGraphic.x = width-isNewGraphic.width;
        }
        //toggle graphic here based on data provider for item 
        override public function set listData(value:ListData):void {
            _listData = value;
            label = _listData.label;
            var newSource:Object = (_listData as TileListData).source;
            if (source != newSource) { // Prevent always reloading...
                source = newSource;
            }
            isNewGraphic.visible = Boolean(_listData.icon);//hacky use of the icon property
        }
        //make sure NEW graphic is on top when the load is complete
        protected function handleCompleteEvent(event:Event):void{
            swapChildren(loader,isNewGraphic);
        }
        override protected function handleErrorEvent(event:IOErrorEvent):void {
            trace('ioError: ' + event);
            //dispatchEvent(event);
        }
    }
}

这是一些测试时间轴代码：

import fl.controls.*;
import fl.data.DataProvider;

var tileList:TileList = new TileList ();
tileList.move(10,10);
tileList.setSize(400, 300);
tileList.columnWidth = 215;
tileList.rowHeight = 300;
tileList.direction = ScrollBarDirection.VERTICAL;
tileList.setStyle("cellRenderer", CustomImageCell);
addChild(tileList);

tileList.dataProvider = getRandomDP(10);

function getRandomDP(size:int):DataProvider {
    var result:DataProvider = new DataProvider();
    for(var i:int = 0; i < size; i++)   result.addItem({label:'item'+i,source:'http://digitalsubdivide.com/wp-content/uploads/2010/08/stackoverflow-300.png',icon:Math.random() > .5});
    return result;
}

HTH

Answer 2

我假设你使用itemRenderer来渲染缩略图。您可以在绑定中使用条件来决定显示哪个缩略图，或使用“新属性”隐藏/显示第二个图像。例如，

<mx:TileList id="mylist"
  labelField="thumbnail"
  dataProvider="{photoFeed}"
  width="600" height="200"
    <mx:itemRenderer>
          <mx:Component>
              <mx:Canvas horizontalAlign="center">
                 <mx:Image id="badge" source="{data.badgeurl}" visible="{data.new}"/>
                 <mx:Image id="thumb" height="75" width="75"
                   source="{data.thumburl}"/>
              </mx:Canvas>
          </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

希望这会有所帮助，包括代码也可能有所帮助。

更改TileList组件中单个缩略图的外观

2 个答案: