Question

我想将flex组件的高度约束到浏览器视口的高度。

使用转发器从数据库表填充组件的子项，并且是基本复选框。有足够多的Flex应用程序最终大约是屏幕高度的两倍，这意味着其余部分布局对我来说很糟糕。如何强制包含这些组件的组件将其自身限制为视口的大小？

Answer 1

将组件高度设置为100％应该是您所需要的。

在mxml中：

<mx:Vbox height="100% />

在actionscript中：

myVBox.percentHeight = 100;

如果组件的内容占用的空间大于屏幕上的可用空间，则组件应提供自己的滚动条，以保持组件的高度相同。如果不是这种情况，那么如果你发布代码就会有所帮助。

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>

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)

Answer 4

您可以将组件设置为视口的高度说：

的ActionScript：

component.height = viewport.height;

MXML：

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

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

4 个答案: