Flex DataGrid Itemrenderer 图像未显示

Question

所有，我有一个 Datagrid，其中 ItemRenderer 分配给一个列，该列是一个货币列（字符串）。渲染器的意思是显示货币的标志，例如；对于美元，它应该显示美元标志图像等。目前该列显示为空白，没有图像。我有以下渲染器（它扩展了 UIComponent）。我在 commitProperties() 方法中动态加载图像。目前，我已将其硬编码为 USD 图像以使其正常工作 - 但没有运气。任何帮助将不胜感激。

    public class CenteredEmbedImage extends UIComponent implements IListItemRenderer,IDropInListItemRenderer

    {

    private var _loader:Loader; 
    private var _img:Image;

    public function CenteredEmbedImage()
    {
        super();

    }


    private var _data:Object;

    [Bindable("dataChange")]
    [Inspectable(environment="none")]


    public function get data():Object
    {
        return _data;
    }

    public function set data(value:Object):void
    {
        var newText:*;

        _data = value;

    invalidateProperties();

        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
    }

    private var _listData:BaseListData;

    [Bindable("dataChange")]
    [Inspectable(environment="none")]

    public function get listData():BaseListData
    {
        return _listData;
    }


    public function set listData(value:BaseListData):void
    {
        _listData = value;
    }


    override protected function commitProperties():void
    {
        super.commitProperties();

        if (listData)
        {
            // remove the old child if we have one
            if (_img)
                removeChild(_img);

            _img= new Image();

            //source code of the second way 
            _loader = new Loader(); 
            //notice: NOT _loader.addEventListener,is  _loader.contentLoaderInfo.addEventListener 
            _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{_img.source = e.currentTarget.content;}); 
            _loader.load(new URLRequest(encodeURI("assets/images/flags/usd.gif"))); 

            addChild(_img);
        }
    }

    override protected function measure():void
    {
        super.measure();

        if (_img)
        {
            measuredHeight = _img.height;
            measuredWidth = _img.width;
        }
    }

    override protected function updateDisplayList(w:Number, h:Number):void
    {
        super.updateDisplayList(w, h);

        if (_img)
        {
            _img.x = (w - _img.width) / 2;
        }
    }

}

}

Answer 1

看起来你做错了很多事情。首先，不要每次删除并重新创建图像，在 createChildren() 方法中创建一次，只需更改源属性即可。其次，我没有看到您在任何地方设置图像的高度或宽度。请务必这样做，通常在 updateDisplayList 中。第三，在测量方法中，我建议使用图像的测量高度和测量宽度设置测量高度和测量宽度。我通常使用 getExplicitOrMeasuredHeight 和 getExplicitOrMeasuredWidth 方法。

第四，你为什么要使用 URL Loader？只需使用 Image 标签并设置来源即可。

这不是经过测试的代码，但我可能会像这样更改您的 itemRenderer：

      public class CenteredEmbedImage extends UIComponent implements IListItemRenderer,IDropInListItemRenderer

    {

//    private var _loader:Loader; 
    // the image definition here didn't have a access modifier, I added private
    private var _img:Image;

    public function CenteredEmbedImage()
    {
        super();

    }


    private var _data:Object;

    [Bindable("dataChange")]
    [Inspectable(environment="none")]


    public function get data():Object
    {
        return _data;
    }

    public function set data(value:Object):void
    {
//  what is newText for?
//        var newText:*;

        _data = value;
// set the source here, although you could also set this in commitProperties if 
// you wanted to add a change variable
        _img.source = "assets/images/flags/usd.gif"

    invalidateProperties();

        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
    }

    private var _listData:BaseListData;

    [Bindable("dataChange")]
    [Inspectable(environment="none")]

    public function get listData():BaseListData
    {
        return _listData;
    }


    public function set listData(value:BaseListData):void
    {
        _listData = value;
    }


// I added this method and moved the image creation here
    override protected function createChildren():void{
     super.createChildren()
     _img= new Image();
     addChild(_img);

    }

    override protected function commitProperties():void
    {
        super.commitProperties();

        if (listData)
        {
            // remove the old child if we have one
// removed this segment
//            if (_img)
//               removeChild(_img);

// removed this loader code too
            //source code of the second way 
//            _loader = new Loader(); 
            //notice: NOT _loader.addEventListener,is  // 

// _loader.contentLoaderInfo.addEventListener 
            // _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{_img.sourc// e = e.currentTarget.content;}); 
//            _loader.load(new URLRequest(encodeURI("assets/images/flags/usd.gif"))); 

        }
    }

    override protected function measure():void
    {
        super.measure();

        if (_img)
        {
// instead of using heigh and width here, I used the getExplicitorMEasured methods
            measuredHeight = _img.getExplicitOrMeasuredHeight();
            measuredWidth = _img.getExplicitOrMeasuredWidth()        }
    }

    override protected function updateDisplayList(w:Number, h:Number):void
    {
        super.updateDisplayList(w, h);

// we created _img in createChildren() so we already iknow it is created
//        if (_img)
//        {

// set the size of the image
            _img.setActualSize(_img.getExplicitOrMeasuredWidth(), _img.getExplicitOrMeasuredHeight();
// setting the position is probably fine
            _img.x = (w - _img.width) / 2;
//        }
    }

}

}

您很有可能只需创建一个扩展图像类的 itemRenderer 就可以让您的生活变得更轻松。像这样的：

public class CenteredEmbedImage extends Image{
 public function CenteredEmbedImage(){ 
   super()
 }

 override function set data(value:Object){
   super.data(value);
   this.source = value.imageSource
 }

}