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

Question

我是一位有用的助手，可以为您进行文本翻译。以下是需要翻译的内容：

我正在使用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上找到了一个相关问题，该问题的解决方案是在父容器上使用“autoLayout”和“verticalScrollPolicy”属性。

因此，我尝试将autoLayout="false"和verticalScrollPolicy="off"属性添加到所有父容器中，以及将verticalScrollPolicy="on"添加到“MainContent”vbox。但是，实验的最终结果是内容被简单地剪切从主容器中删除（并且在MainContent vbox中添加了一个无用的没有拇指的滚动条）。

有人知道如何解决这个问题吗？

- benjismith

Answer 1

一个 HBox 或 VBox 会尽可能地显示其内容而不出现滚动条。这将强制父容器（通常是一直到主应用程序）在内容过大而无法适应可用范围时进行滚动。

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

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

- joshtynjala

Answer 2

找到了解决方案。

看起来防止VBox过度扩展其垂直空间（并强制其父级增加滚动条）的唯一方法是将VBox包装在Canvas中。

有一个很方便的小组件这里，叫做ScrollableVBox，它执行解决方法，同时处理一些簿记问题（如向VBox添加和删除子项，传递它们到Cavas包装器中）。

- benjismith

Answer 3

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

- abedurftig

Answer 4

你的问题看起来很像我一段时间前曾经苦苦挣扎的问题。我从这个讨论中找到了答案：只需禁用Box的measure()实现即可。

这是一个相当简单的修复方法，在我的情况下完美地解决了问题，也没有造成任何“副作用”。但你的结果可能会有所不同。

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 */ }
    }
}

- hasseg

---

我会在下午尝试一下。虽然我想，禁用度量可能会使容器的水平调整变得困难。我只想解决垂直滚动问题。 - benjismith

你说得完全正确——这是一个相当激进的黑客技巧，但在某些特定情况下可能会很有用（比如我的情况）。 - hasseg