Question

全部，我有一个Datagrid，其ItemRenderer分配给一个Currency列（String）。渲染器意味着显示货币的标志，例如;对于美元，它应该显示美元标志图像等。此时列显示为空白而没有图像。我有以下渲染器（扩展UIComponent）。我在commitProperties（）方法中动态加载图像。目前我已将其硬编码为美元图像以使其正常工作 - 但没有运气。任何帮助都会有很大的帮助。

    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中。第三，在测量方法中，我建议使用measuredHeight和measuredWidth设置measuredHeight和measuredWidth。我通常使用getExplicitOrMeasuredHeight和getExplicitOrMeasuredWidth方法。

第四，为什么使用URL加载器？只需使用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
 }

}

Flex DataGrid Itemrenderer图像未显示

1 个答案: