如何将 Flex 组件的高度绑定到浏览器窗口的高度？

Question

我想将一个flex组件的高度限制为浏览器视口的高度。

该组件的子元素使用repeater从数据库表格中填充，并且是基本复选框。由于它们有足够多，所以flex应用程序的高度大约是屏幕的两倍，这意味着布局的其余部分会变得糟糕。我如何强制包含这些内容的组件将自身限制为视口的大小？

- Chris R

Answer 1

将组件的高度设置为100％应该就足够了。

在MXML中：

<mx:Vbox height="100%" />

在ActionScript中：

myVBox.percentHeight = 100;

如果组件内容占用屏幕上不可用的更多空间，则组件应提供自己的滚动条，保持组件相同的高度。 如果不是这种情况，您可以发布代码以获得帮助。

- greggreg

Answer 2

将容器的minHeight和minWidth设置为0：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
    <mx:HBox width="100%" height="100%">
        <mx:HBox width="20%" height="100%">
            <mx:Label text="Left Panel"/>
        </mx:HBox>
        <mx:VBox width="100%" height="100%" minWidth="0" minHeight="0">
            <mx:CheckBox label="1" />
            <mx:CheckBox label="2" />
            <mx:CheckBox label="3" />
            <mx:CheckBox label="4" />
            <mx:CheckBox label="5" />
            <mx:CheckBox label="6" />
            <mx:CheckBox label="7" />
            <mx:CheckBox label="8" />
            <mx:CheckBox label="9" />
            <mx:CheckBox label="10" />
            <mx:CheckBox label="11" />
            <mx:CheckBox label="12" />
            <mx:CheckBox label="13" />
            <mx:CheckBox label="14" />
            <mx:CheckBox label="15" />
            <mx:CheckBox label="16" />
            <mx:CheckBox label="17" />
            <mx:CheckBox label="18" />
            <mx:CheckBox label="19" />
            <mx:CheckBox label="20" />
        </mx:VBox>
        <mx:HBox width="20%" height="100%"> 
            <mx:Label text="Right Panel"/>
        </mx:HBox>
    </mx:HBox>
</mx:Application>

- tefozi

Answer 3

如果我理解你的问题，你想要获取浏览器窗口客户区域的大小，这与你的 Flex 应用程序的大小相同。

因此，只需使用 Application.application.width 和 Application.application.height。

你应该监听更改应用程序大小的事件，并进行比较。

if (component.width > Application.application.width)
     component.width = Application.application.width

该事件可能是stage.addEventListener(Event.RESIZE, onStageResize)

- Diego Dias

Answer 4

您可以将组件设置为视口的高度，例如：

ActionScript：

component.height = viewport.height;

MXML：

<mx:component height={viewport.height} />

- Treby