Adobe Flex / AIR: прокрутка субкомпонента, а не всего окна

Я разрабатываю приложение с помощью 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" ко всем родительским контейнерам, а также verticalScrollPolicy = "on" в vbox "MainContent". Но конечным результатом этого эксперимента было то, что содержимое было просто вырезано из основного контейнера (и в vbox MainContent была добавлена ​​бесполезная полоса прокрутки без большого пальца).

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

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
5
0
7 306
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

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

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

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

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

Я попробую позже днем. Однако я предполагаю, что эта мера отключения затрудняет изменение размера контейнера по горизонтали. Я просто хочу исправить проблему вертикальной прокрутки.

benjismith 10.12.2008 18:18

Вы совершенно правы - это довольно радикальный прием, но он может быть полезен в некоторых конкретных ситуациях (например, в моей).

hasseg 10.12.2008 18:28

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

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

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

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

Другие вопросы по теме