Горизонтальная компоновка: mx vs spark - изменение размера детей - PullRequest
Новая
       42

Горизонтальная компоновка: mx vs spark - изменение размера детей

0 голосов
/ 29 августа 2011

В Flex 3 я имел обыкновение брать 2 панели, размещать их со 100% настройками ширины в HBox. Если бы я изменил свойство ширины первой панели на что-то меньшее, скажем, 20%, вторая автоматически обновит и заполнит пространство, которое раньше занимало первая, когда первая уменьшала размеры.

Я замечаю в искре, этого не происходит. У меня есть приложение с HorizontalLayout и изменяемым размером панели управления слева и панель справа, ширина = 100%. Когда я изменяю размер левой панели вниз, правая панель ничего не делает. Таким образом, я получаю чистую панель с изменяемыми размерами, кучу потерянного пространства и мою правую панель, просто сидящую там.

То, что я ожидаю, так это то, что поскольку ширина правой панели имеет ширину = "100%", то если размер ее левой панели будет изменен, то в правой панели будет соответствующий рост для заполнения.

Я пытался вручную запустить проверку свойств и размера без эффекта. Мне интересно, что изменилось в HorizontalLayout, который больше не позволяет этой технике работать. Я также хотел бы знать, какие решения доступны?

Вот какой-то грохот: 

<mx:Application>

   <mx:Script>
      <![CDATA[

         protected function resizeClick(event:MouseEvent):void
         {
            pnl1.percentWidth = 10;  // When this would execute, pnl2 would automatically
                                     // fill in the space previously held by pnl1.
         }

      ]]>
   </mx:Script>
   <mx:HBox width="100%" height="100%">
      <mx:Panel id="pnl1" width="40%" height="100%">  // Uses 40%
         <mx:Button id="resizeButton" click="resizeClick(event)"/>
      </mx:Panel>
      <mx:Panel id="pnl2" width="100%" height="100%"/>  // Fills in the rest of the available space
   </mx:HBox>
</mx:Application>

Flex 4.5 не обновляет автоматически размер pnl2 при изменении размера pnl1. Я думаю, что поскольку используется HorizontalLayout, оба потомка будут обновляться при изменении ширины одного из них. Но это, похоже, не так. Я знаю, что могу создать два состояния, чтобы достичь этого, но я думал, что мне не нужно для чего-то столь тривиального.

Ответы [ 2 ]

0 голосов
/ 31 августа 2011

Так вот как я в итоге решил эту проблему.Я должен был быть немного более конкретным в своем посте, чтобы объяснить, что Panel 1 на самом деле является «разборной» панелью, которая изменяет свой собственный размер при каждом нажатии кнопки заголовка.Вышеприведенный пример работает, но поскольку в представлении нет числового элемента управления, который «сообщает» свойству панели.percentWidth, сколько нужно изменить, я настроил свою складную панель так, чтобы она отправляла пользовательские события, которые обрабатываются оболочкой.Пользовательские события в основном указывают на то, что происходит со складной панелью.Оттуда я могу обрабатывать события отдельно и затем контролировать размер Panel 2.

Решение на самом деле довольно простое, и я надеялся на что-то более "закулисное", но это работало нормально. 

<s:Application initialize="initApp(event)">

   <fx:Script>
      <![CDATA[

         protected function initApp(event:FlexEvent):void
         {
              this.addEventListener("PanelCollapse", panelHandler);
              this.addEventListener("PanelNormal", panelHandler);
         }    

         protected function panelHandler(event:Event):void
         {
             switch(event.type)
             {
                case "PanelCollapse":
                   pnl2.percentWidth = 100;
                   break;
                case "PanelNormal":
                   pnl2.percentWidth = 60;
                   break;
             }
         }
      ]]>
   </fx:Script>

      <comp:CollapsiblePanel id="pnl1" width="40%" height="100%">

      </mx:Panel>
      <s:Panel id="pnl2" width="100%" height="100%"/>  // Fills in the rest of the available space

</s:Application>
0 голосов
/ 30 августа 2011

Этот образец отлично работает и иллюстрирует правильные изменения размеров: 

<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <s:VGroup height="100%" width="100%">
        <s:HSlider change="firstPanel.percentWidth = event.currentTarget.value" maximum="100" minimum="0"
            value="{firstPanel.percentWidth}" />
        <s:HGroup height="100%" width="100%">
            <s:Panel height="100%" id="firstPanel" minWidth="0" width="40%" />
            <s:Panel height="100%" width="100%" />
        </s:HGroup>
    </s:VGroup>
</s:Application>
...