代码之家 › 专栏 › 技术社区 › benjismith

AdobeFlex/Air:滚动子组件,而不是整个窗口

scrollbars air layout flex

benjismith · 技术社区 · 16 年前

我正在开发一个使用AdobeFlex和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。

在整个应用程序窗口中都有滚动条,这看起来真的很傻。

我要寻找的是一种解决方案,滚动条只应用于“主内容”vbox(以及导航和帮助内容面板,如果它们的内容超出了窗口边界)。

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

因此,我尝试将autolayout=“false”和verticalscrollpolicy=“off”属性添加到所有父容器,以及将verticalscrollpolicy=“on”添加到“maincontent”vbox。但实验的最终结果是,内容被简单地从主容器中裁剪出来(在主内容vbox中添加了一个没有拇指的无用滚动条)。

有人知道怎么解决这个问题吗?

4 回复 | 直到 13 年前

Josh Tynjala Ivan Chernykh 16 年前

hbox或vbox将尽可能努力在不使用滚动条的情况下显示其内容。这将强制父容器(通常一直到主应用程序)成为在内容太大而无法容纳在可用边界中时必须滚动的容器。

在后台,hbox或vbox正在其measure()函数中设置measuredMinWidth和measuredMinHeight属性,以匹配其子级所需的维度。父容器将接受该建议,滚动的任务将向上移动显示列表。

Hasseg的解决方案在很多情况下都有效,因为它阻止了容器的测量,但它有点笨拙。下面是不为容器构建替换子类就可以做的事情。在要滚动的容器实例上, 将MinWidth或MinHeight设置为0 . 这将优先于该容器的MeasuredMinWidth或MeasuredMinWith属性,允许父级将实际大小设置为更易于管理的值。

benjismith 16 年前

找到了解决方案。

防止vbox过度扩展垂直空间(并强制其父级增加滚动条)的唯一方法是将vbox包装在画布中。

有一个方便的小部件 here ,称为scrollablevbox,它在处理一些簿记问题(例如在vbox中添加和删除子项,将它们传递给cavas包装器)的同时执行解决方案。

abedurftig 14 年前

不要将vbox包装在画布中,而是将要使滚动条为0的vbox的MinHeight属性设置为0。

Cyril Gandon niktrs 13 年前

你的问题看起来很像我前一段时间遇到的问题。我的答案来自 this discussion :只需禁用 measure() 执行 Box .

这是一个非常简单的修复方法,在我的案例中非常有效,并且没有造成任何“附带损害”。您的结果可能会有所不同。

package whatever
{
    import mx.containers.Box;

    /**
    * A Box that has no measure() implementation.
    * 
    * <p>
    * See http://old.nabble.com/-flex_india%3A3318--Size-layout-issues-with-respect-to-parent-containers-to12882767.html
   *  for more info.
    * </p>
    */
    public class NonMeasuredBox extends Box
    {
        /**
        * Constructor
        */
        public function NonMeasuredBox():void
        {
            super();
        }

        override protected function measure():void { /* disabled */ }
    }
}