让 Flex 数据网格适合数据

Question

我有几行文本数据，其范围在 0 到 100 之间，并且所有数据都需要同时在屏幕上可见。 网格的默认行为很好，直到 rows * rowHeight > 网格高度。

基本上我需要一个挂钩到项目高度或行高来根据网格的高度计算它。 我已将 paddingTop 和 paddingBottom 设置为零，但行之间仍然存在大量空白。

我的数据网格组件...

<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="OnCreationComplete()"
paddingTop="0"
paddingBottom="0"
>

<mx:Script>
    <![CDATA[

    private function OnCreationComplete():void
    {
        //setRowHeight(10);
    }

    override protected function setRowHeight(v:Number):void
    {
        super.setRowHeight(v);
    }

    ]]>
</mx:Script>

</mx:DataGrid>

setRowHeight() 有帮助，但是如果我将行高设置为 10 之类的值，则单元格的 itemRender 会大于单元格。

Answer 1

您可能需要查看 DataGrid.variableRowHeight 属性，因为当该属性设置为 false（默认值）时，所有行的高度都将与最大的 itemRenderer 相同。 您还可以考虑为每个 DataColumn 编写自己的 itemRenderer。

如果您真正想做的只是根据 dataProvider 中的项目数设置行高，则可以像这样设置 DataGrid.rowHeight 属性（假设您的网格具有固定高度，例如 100%）：（

myDataGrid.dataProvider = myArray;
myGrid.rowHeight = Math.floor((myGrid.height - myGrid.headerHeight)/myArray.length);

我我在这里发言，因为如果您最终得到一个向上舍入的小数值，您将需要一个滚动条）

正如我认为您已经注意到的那样，这种方法的唯一问题是 itemRenderer 可能无法正确显示连续太小了。 我想您可以通过根据渲染器的高度更改渲染器中的字体来解决此问题。

Answer 2

谢谢inferis，这对我帮助很大。 这是我的最终网格组件。 由于有一些标注，它并不是真正独立的，但如果它可以帮助其他人开始工作，那就太好了！

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
paddingTop="-3"
paddingBottom="-3"
resize="OnResize(event)"
>

<mx:Script>
    <![CDATA[
        import mx.containers.Panel;
    import mx.core.Application;
    import mx.events.ResizeEvent;

    protected function OnResize(event:ResizeEvent):void
    {
        this.invalidateDisplayList();
    }

/**
 *  @private
 *  Sizes and positions the column headers, columns, and items based on the
 *  size of the DataGrid.
 */
override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void
{
    if( this.collection.length > 0 ) // so don't divide by zero
    {
        var appHeight:Number = Application.application.height;
        var appMinusMenuHeight:Number = appHeight - Application.application.hboxPrintBar.height;
        var boxHeight:Number = Application.application.vboxViewAll.height;
        if( boxHeight > 0 )
        {
            var gridHeight:Number = (appMinusMenuHeight - this.headerHeight) * 0.93;
            var calcHeight:Number = gridHeight / this.collection.length;
            var calcHeightFloor:Number = Math.floor( calcHeight );
            setRowHeight( calcHeightFloor );
            //var p:Panel = this.parent as Panel;
            //p.title = calcHeightFloor.toString();
            if( calcHeightFloor <= 10 )
                this.setStyle("fontSize",calcHeightFloor);
        }
    }
    super.updateDisplayList(unscaledWidth,unscaledHeight);
}

    ]]>
</mx:Script>

</mx:DataGrid>