将 Spark Element 的 maxHeight 设置为 Container 的 100%答案

【问题标题】：Set Spark Element's maxHeight to 100% of Container's将 Spark Element 的 maxHeight 设置为 Container 的 100%
【发布时间】：2011-08-22 19:58:26
【问题描述】：

我在位于主应用程序的组中有一个带有（面向行的）平铺布局的列表组件。

当没有足够的项目填充应用程序窗口高度时，我希望列表垂直居中，所以verticalCenter="0"。

但是，当项目的数量超出了屏幕的垂直显示范围时，列表会扩展超出应用程序窗口的高度，并且滚动条不会启动。

如果将列表高度设置为 100%，我可以解决此问题，但这意味着当它包含的项目较少时，它不会垂直居中。

理想的解决方案是 maxHeight="100%"，但当然 maxHeight 不适用于百分比。我将如何实现这种行为？

谢谢，

提姆

编辑：请看下面的代码：

<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"
                       applicationComplete="applicationCompleteHandler(event)"
                       width="800" height="600"
                       showStatusBar="false">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;

            protected function applicationCompleteHandler(event:FlexEvent):void
            {
                var arrayList:ArrayList = new ArrayList;
                for (var i:int = 1; i <= 50; i ++)
                {
                    arrayList.addItem(String(i));
                }
                list.dataProvider = arrayList;
            }

        ]]>
    </fx:Script>

    <s:List id="list"
            itemRenderer="itemRenderer"
            useVirtualLayout="false"
            horizontalCenter="0" verticalCenter="0"
            borderVisible="false">

            <s:layout>
                <s:TileLayout orientation="rows"
                              requestedColumnCount="4"
                              columnWidth="150" rowHeight="150"/>
            </s:layout>

        </s:List>


</s:WindowedApplication>

这是我的项目渲染器：

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true">

    <s:Rect width="100%" height="100%">
        <s:stroke>
            <s:SolidColorStroke color="0"/>
        </s:stroke>
    </s:Rect>

    <s:Label text="{data}"
             horizontalCenter="0" verticalCenter="0" fontSize="50"/>

</s:ItemRenderer>

如果将 for 循环更改为仅 10 次迭代，则列表在屏幕上垂直居中。否则列表会扩展到屏幕之外，垂直居中且不会出现滚动条。

使用 clipAndEnableScrolling 没有任何区别。我还尝试将列表放入具有 100% 宽度和高度的组中，但我得到或多或少相同的行为，除了列表在高于容器时与顶部齐平。

【问题讨论】：

标签： apache-flex flex4 flex4.5

【解决方案1】：

你可以试试这样的：

<s:List id="list" maxHeight="{list.height}" height="100%" />

您也可以在其父容器更改大小时更改 maxHeight 值。

要获得完整的答案，我认为您将不得不展示一些关于如何设置的代码。

【讨论】：

谢谢，我听取了您的建议并听取了父母的调整大小事件。

【解决方案2】：

以下是在父容器更改大小时自动设置 maxHeight 值的方法（正如上面 JeffryHouser 建议的那样）：

<s:Group id="boostListParent" width="100%" height="80%">
    <s:List id="boostList" width="100%" maxHeight="{boostListParent.height}" height="100%" itemRenderer="views.BoostTierItemRenderer"/>
</s:Group>

【讨论】：