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» может содержать огромный список подкомпонентов, а наличие этого длинного списка приводит к появлению вертикальной полосы прокрутки на самом высоком уровне графического интерфейса, окружающей vbox «MainContainer».

Это выглядит очень глупо, имея полосы прокрутки вокруг всего окна приложения.

Вместо этого я ищу решение, в котором полоса прокрутки применяется только к vbox «MainContent» (а также к панелям Navigation и HelpContent, если их содержимое выходит за границы окна).

Я нашел связанный с вопрос в StackOverflow, где решением проблемы было использование атрибутов «autoLayout» и «verticalScrollPolicy» в родительских контейнерах.

Поэтому я попытался добавить атрибуты autoLayout = "false" и verticalScrollPolicy = "off" во все родительские контейнеры, а также вертикальный атрибутScrollPolicy = "on" в поле "MainContent". Но конечный результат этого эксперимента состоял в том, что содержимое было просто вырезано из основного контейнера (и в vbox MainContent была добавлена ​​бесполезная полоса прокрутки без большого пальца).

Кто-нибудь знает, как решить эту проблему?

Answer 1

HBox или VBox будет стараться изо всех сил отображать свой контент без полос прокрутки. Это вынуждает родительский контейнер (часто вплоть до основного приложения) быть тем, который должен прокручиваться, если содержимое слишком велико, чтобы помещаться в доступные границы.

За кулисами HBox или VBox задает свойства measureMinWidth и measureMinHeight в своей функции measure () для соответствия размерам, требуемым его дочерними элементами. Родительский контейнер выполнит эту рекомендацию, и задача прокрутки переместится вверх по списку отображения.

Решение hasseg работает во многих случаях, потому что оно останавливает измерение контейнера, но это отчасти хакерское. Вот что вы можете сделать без создания подклассов замены для ваших контейнеров. На экземпляре контейнера, который вы хотите прокрутить, установите minWidth или minHeight в 0 . Это будет иметь приоритет над измеряемыми свойствамиMinWidth или measureMinHeight этого контейнера, что позволит родителю установить фактический размер на более управляемый.

Answer 2

Нашли решение.

Похоже, что единственный способ предотвратить агрессивное расширение VBox своего вертикального пространства (и вынудить его родителей вырастить полосы прокрутки) - это обернуть VBox в Canvas.

Здесь есть небольшой удобный компонент здесь , называемый ScrollableVBox, который выполняет обходной путь, решая некоторые проблемы, связанные с созданием книги (например, добавление и удаление дочерних элементов в VBox, передача их вокруг оболочки Cavas). 1007 *

Answer 3

Вместо того, чтобы оборачивать VBox в Canvas, установите свойство minHeight VBox, для которого вы хотите иметь полосу прокрутки, равным 0.

Answer 4

Ваша проблема очень похожа на ту, с которой я боролся некоторое время назад. Я нашел ответ от этого обсуждения : просто отключите 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 */ }
    }
}