Question

这是我的问题。我在mx：DataGrid列中有一个mx：Image。如果我没有专门设置图像的宽度和高度，当图像加载到网格中时，只显示图像的一部分。

娱乐步骤：

创建新的Flex项目（桌面）
配置项目以使用Halo Theme。
在各自的位置添加以下代码 *注意：确保已分配windowedApplication的 creationComplete 事件。也可能需要对任何导入语句等进行一些调整。抱歉。*
这是我遇到的问题的一个简单示例。启动程序时，您将看到图像的一部分。单击重新绑定时，将显示完整图像。

我正在尝试在第一个绑定上显示完整图像，而不是第二个而不用设置MXML中的尺寸。我没有成功通过ActionScript显示完整的图像，而没有发生某种用户交互。

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
        {
            BindData();
        }

        private function BindData():void
        {
            var objOrderItem:Object = new Object();
            var items:ArrayCollection = new ArrayCollection(new Array(objOrderItem));
            dgMain.dataProvider = new ArrayCollection(items.source);
        }   
    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<mx:VBox width="100%">
    <mx:Button label="Rebind" click="BindData()" />

    <mx:DataGrid id="dgMain" resizableColumns="false" draggableColumns="false"
                 sortableColumns="false" rowCount="1">
        <mx:columns>
            <mx:DataGridColumn headerText="Thumb" sortable="false" width="60">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:HBox horizontalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="100%">
                            <mx:Image source="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTTuc9n_oweh-dv4LUljzh0Lxzn1AvZchODUoSAeGePaDwPqUuw"
                                      width="60" maintainAspectRatio="true" />  
                        </mx:HBox>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>                
        </mx:columns>
    </mx:DataGrid>
    <mx:Label text="Text After Grid" />
</mx:VBox>

提前致谢！

Answer 1

只是猜测因为这对我来说在DataGrids之前有用，你试过在数据网格上调用invalidateList（）吗？刚检查该方法是否设置了itemsSizeChanged标志，然后在标志的定义中调用invalidateDisplayList：

/**
 *  A flag that indicates that the size of the renderers may have changed.
 *  The component usually responds by re-applying the data items to all of
 *  the renderers on the next <code>updateDisplayList()</code> call.
 *  There is an assumption that re-applying the items will invalidate the
 *  item renderers and cause them to re-measure.
 */

Answer 2

尝试使用setTimeout函数，延迟时间可能为100，而不是callLater（）。在某些情况下，当callLater（）失败时，我可以使用它。

Answer 3

解决了问题

各位大家好，通过检查行数高度来调整行绑定的DataGrid的行高，我能够解决问题，看它是否小于图像的高度。我是这样做的：

我为图像的完整事件附加了一个监听器。然后，侦听器将触发一个函数，该函数检查DataGrid的rowHeight以查看它是否小于图像内容的高度。如果是，则将rowHeight更新为图像内容的高度。

我只是没有成功使用此处建议的任何方法，以及我尝试使用的任何其他方法。

以下完整代码示例：

请记住，这是一个快速，简单的修复实现。更复杂的实现，我在我的项目中使用的IE也同样适用。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       creationComplete="windowedapplication1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import controls.Photo.PhotoComponentForDataGrid;

            import flash.utils.setTimeout;

            import mx.collections.ArrayCollection;
            import mx.controls.Image;
            import mx.events.FlexEvent;

            protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
            {
                BindData();
            }

            public function doImageDownloaded(imgLoaded:Image):void
            {   
                if (dgMain.rowHeight < imgLoaded.content.height)
                {
                    dgMain.rowHeight = imgLoaded.content.height;
                }
            }

            private function BindData():void
            {
                var objOrderItem:Object = new Object();
                objOrderItem.photoUrl = "http://c10008669.r69.cf2.rackcdn.com/9770258a-6ac1-4db5-956a-ada08beb7ae5/SK-000713/001/thumb_350/gallery.jpg";

                var items:ArrayCollection = new ArrayCollection(new Array(objOrderItem));
                dgMain.dataProvider = new ArrayCollection(items.source);
            }   
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <mx:VBox width="100%">
        <mx:HBox>
            <mx:Button label="Rebind" click="BindData()" />
        </mx:HBox>

        <!-- Items for Distribution Order -->
        <mx:DataGrid id="dgMain" resizableColumns="false" draggableColumns="false"
                     sortableColumns="false" rowCount="1" variableRowHeight="true">
            <mx:columns>
                <mx:DataGridColumn headerText="Thumb" sortable="false" width="60">
                    <mx:itemRenderer>
                        <fx:Component>
                            <mx:HBox horizontalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="100%">

                                <fx:Script>
                                    <![CDATA[
                                        protected function image1_completeHandler(event:Event):void
                                        {
                                            outerDocument.doImageDownloaded(imgThumb);
                                        }
                                    ]]>
                                </fx:Script>

                                <mx:Image id="imgThumb" source="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTTuc9n_oweh-dv4LUljzh0Lxzn1AvZchODUoSAeGePaDwPqUuw"
                                          complete="image1_completeHandler(event)"/>    
                            </mx:HBox>
                        </fx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
        <mx:Label text="Text After Grid" />
    </mx:VBox>
</s:WindowedApplication>

Flex DataGrid w / Image - 图像未完全显示

3 个答案: