Adobe Flex / AIR:滚动子组件,而不是整个窗口

时间:2008-12-10 01:29:23

标签: flex layout air scrollbars

我正在使用Adobe Flex和AIR开发一个应用程序,我一直在试图弄清楚如何解决滚动问题。

我的主应用程序窗口的基本结构(大大简化)是:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   paddingTop="0" paddingRight="0" paddingBottom="0" paddingLeft="0"
   width="800" height="600" layout="vertical" verticalAlign="top" 
>
   <mx:VBox id="MainContainer" width="100%" height="100%">
      <mx:Panel id="Toolbars" width="100%" height="25" />
      <mx:HDividedBox width="100%" height="100%" >
         <mx:Panel id="Navigation" minWidth="200" height="100%" />
         <mx:VBox id="MainContent" width="100%">
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
            <mx:Panel width="100%" height="200" />
         </mx:VBox>
         <mx:Panel id="HelpContent" minWidth="200" height="100%" />
      </mx:HDividedBox>
      <mx:Panel id="FooterContent" width="100%" height="25" />
   </mx:VBox>
</mx:WindowedApplication>

问题是“MainContent”框可能包含一个巨大的子组件列表,并且该长列表的存在导致垂直滚动条出现在GUI的最高级别,围绕“MainContainer”vbox。

看起来非常愚蠢,在整个应用程序窗口周围都有滚动条。

我正在寻找的是一种解决方案,其中滚动条仅应用于“MainContent”vbox(以及Navigation和HelpContent面板,如果它们的内容超出窗口边界)。

我在StackOverflow上找到了related question,问题的解决方案是在父容器上使用“autoLayout”和“verticalScrollPolicy”属性。

所以我尝试将autoLayout =“false”和verticalScrollPolicy =“off”属性添加到所有父容器,并将verticalScrollPolicy =“on”添加到“MainContent”vbox。但该实验的最终结果是内容只是从主容器中剪切掉了(并且没有拇指的无用滚动条被添加到MainContent vbox中)。

任何人都知道如何解决这个问题?

4 个答案:

答案 0 :(得分:6)

HBox或VBox将尽可能努力地显示其内容而不使用滚动条。这会强制父容器(通常一直到主应用程序)是必须滚动的容器,如果内容太大而不适合可用的边界。

在幕后,HBox或VBox在其measure()函数中设置measuredMinWidth和measuredMinHeight属性,以匹配其子节点所需的尺寸。父容器将遵循该建议,滚动任务会向上移动显示列表。

hasseg的解决方案在很多情况下起作用,因为它阻止了容器的测量,但它有点像hacky。这是您可以在不为容器构建替换子类的情况下执行的操作。在要滚动的容器实例上,将minWidth或minHeight设置为0 。这将优先于该容器的measuredMinWidth或measuredMinHeight属性,允许父级将实际大小设置为更易于管理的大小。

答案 1 :(得分:1)

找到解决方案。

看起来阻止VBox积极扩展其垂直空间(并强制其父项增长滚动条)的唯一方法是将VBox包装在Canvas中。

有一个方便的小组件here,称为ScrollableVBox,它在处理一些书籍问题时执行变通方法(例如向VBox添加和删除子项,将它们传递给Cavas包装器)。

答案 2 :(得分:0)

你的问题看起来很像我前段时间挣扎过的问题。我从this discussion找到了答案:只需停用measure()的{​​{1}}实施。

这是一个非常简单的解决方案,在我的情况下完美运行,并没有造成任何“附带损害”。您的结果可能会有所不同。

Box

答案 3 :(得分:0)

不要将VBox包装在Canvas中,而是将想要滚动条的VBox的minHeight属性设置为0。

寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1