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

发布于 2024-08-10 22:58:40 字数 157 浏览 1 评论 0原文

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

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

I want to constrain the height of a flex component to the height of the browser viewport.

The component's children are populated from a database table using a repeater, and are basic checkboxes. There are enough of them that the flex app ends up being about twice the height of the screen, which means some of the rest of the layout goes crappy on me. How can I force the component that contains these to limit itself to the size of the viewport?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

少女净妖师 2024-08-17 22:58:40

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

在 mxml 中:

在 actionscript 中:

myVBox.percentHeight = 100;

如果组件的内容占用的空间超过在屏幕上可用的组件应该提供自己的滚动条,使组件保持相同的高度,如果不是这种情况,如果您发布代码将会有所帮助。

Setting the components height to 100% should be all you need.

in mxml:

<mx:Vbox height="100% />

in actionscript:

myVBox.percentHeight = 100;

if the contents of the component take up more space than available on screen the component should provide its own scroll bars keeping the component the same height. If this is not the case it would help if you posted code.

地狱即天堂 2024-08-17 22:58:40

将容器的 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>

Set minHeight and minWidth for your container to 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>
岛歌少女 2024-08-17 22:58:40

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

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

您应该监听更改应用程序大小的事件并进行比较,例如

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

该事件可能是 stage.addEventListener(Event.RESIZE, onStageResize)< /代码>

If I understand your question you want to get the size of the client area of the browser window which is the same as the size of your Flex app.

So, just use Application.application.width and Application.application.height

You should listen to the event that changes the app size and make a comparison like

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

The event would probably be stage.addEventListener(Event.RESIZE, onStageResize)

悟红尘 2024-08-17 22:58:40

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

动作脚本:

component.height = viewport.height;

MXML:

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

You can set you component to the height of the viewport
say:

ActionScript:

component.height = viewport.height;

MXML:

<mx:component height={viewport.height} />
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文