Flex Canvas child Произвольное изменение размеров - PullRequest
Новая
       20

Flex Canvas child Произвольное изменение размеров

0 голосов
/ 25 марта 2010

У меня есть приложение с областью просмотра, которая содержит все компоненты, которые должны отображаться. Навигация определяется в основном приложении. Все компоненты основаны на холсте.

Основное приложение выглядит так: 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*">
 <mx:VBox width="1024" height="100%" horizontalCenter="0" verticalGap="0" backgroundColor="#FFFFFF">
  <mx:Image id="header" verticalAlign="top" />
  <mx:ViewStack id="body" horizontalCenter="0" verticalCenter="0" width="100%" height="100%">
   <components:HomePage id="hp" width="100%"/>
   <components:CollectionSelection id="cs" width="100%"/>
   <components:SearchEngine id="se" width="100%"/>
   <components:SearchResult id="sr" width="100%"/>
   <components:Tray id="tr" width="100%"/>
   <components:Order id="or" width="100%"/>
  </mx:ViewStack>
  <mx:Image id="footer" verticalAlign="bottom" maintainAspectRatio="false" width="100%"/>
 </mx:VBox>
</mx:Application>

Я получаю странное поведение от компонента TRAY.

Вот код для компонента Tray (я только оставил информацию на дисплее): 

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Image id="bg" 
  horizontalCenter="0" verticalCenter="0" 
  width="100%" height="100%" 
  maintainAspectRatio="false"/>

 <mx:HBox width="100%">
  <mx:Button x="20" y="20" label="BACK"/>
  <mx:Spacer width="100%"/>
  <mx:LinkBar 
   itemClick="linkbar_itemClick(event)"
   styleName="GLBLinkBTN"
   separatorColor="#FFFFFF"
   separatorWidth="1"
   >
   <mx:dataProvider>
    <mx:Object label="CLEAR"/>
    <mx:Object label="LOGOUT"/>
   </mx:dataProvider>
  </mx:LinkBar>
 </mx:HBox> 

 <mx:VBox id="mainBox" horizontalCenter="0" verticalCenter="0" verticalGap="0">
  <mx:HBox width="100%" height="50" backgroundColor="#60524D" verticalAlign="bottom" paddingBottom="5">
   <mx:Label styleName="TRTitle" paddingLeft="15"/>
   <mx:Spacer width="100%"/>
   <mx:Label styleName="TRItems" paddingRight="15"/>
  </mx:HBox>
  <mx:HorizontalList id="hlist"
   dataProvider="{TrayData.instance.itemsCollection}" 
   columnCount="{TrayData.instance.hlistColumns}"
   rowCount="1"
   itemRenderer="components.TrayItem"
   horizontalScrollPolicy="off"
   rollOverColor="#FFFFFF"
   selectionColor="#FFFFFF"
   horizontalCenter="0" verticalCenter="0"
   borderStyle="none"
   horizontalScrollPosition="{TrayData.instance.hsPosition}"
   />
  <mx:HBox width="100%" backgroundColor="#E7DDDB" height="40" verticalAlign="middle" paddingLeft="20" paddingRight="20">
   <mx:Box width="25" verticalAlign="middle" horizontalAlign="left">
    <mx:Button id="leftBtn" />
   </mx:Box>
   <mx:Spacer width="100%"/>
   <mx:Box width="25" verticalAlign="middle" horizontalAlign="right">
    <mx:Button id="rightBtn" />
   </mx:Box>
  </mx:HBox>
 </mx:VBox> 
</mx:Canvas>

Все компоненты отображаются правильно. Однако иногда, случайно, vbox "mainBox" в компоненте трей не отображается должным образом: горизонтальщик сжимается и вместо полного отображения его элементов я получаю горизонтальные и вертикальные полосы прокрутки для каждого элемента ... В настоящее время я пытаюсь воспроизвести это поведение (чтобы получить экран для печати), но точно знаю, что оно работает нормально ... -_- 'Как только у меня это заработает, как не должно, я загружу изображение.

Вот код для itemRenderer (на всякий случай ...): 

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
 <mx:HBox width="100%" paddingTop="0" paddingBottom="0" paddingRight="3">
  <mx:Spacer width="100%"/>
  <mx:Box width="14" height="14" verticalAlign="middle" horizontalAlign="center">
   <mx:Button width="8" height="8"/>
  </mx:Box>
 </mx:HBox>
 <mx:VBox paddingLeft="20" paddingRight="20" verticalGap="15" paddingBottom="15">
  <mx:Canvas id="thumbnail">
   <mx:Image id="thumbnailBG" />
   <mx:Image id="thumbnailIM" />
  </mx:Canvas >
  <mx:VBox width="100%" verticalGap="7">
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label paddingBottom="5"/>
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74"opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   <mx:HBox width="100%" height="13">
    <mx:Label width="74" opaqueBackground="#ECE5E2"/>
    <mx:Label />
   </mx:HBox>
   </mx:VBox>
  <mx:Button />
 </mx:VBox>

</mx:VBox>

Ваша помощь будет очень признательна.

С уважением, BS_C3

Привет! Я наконец снова получил случайное поведение. А вот несколько скриншотов ... Код не изменился ...

Это нормальное поведение:

альтернативный текст http://www.freeimagehosting.net/uploads/d1df2950af.png

Это случайное поведение:

альтернативный текст http://www.freeimagehosting.net/uploads/fcf1a603f4.png

FI: Я получаю нормальное поведение при обновлении приложения.

Надеюсь, что это поможет вам понять мою проблему> _ <</p>

Привет.

1 Ответ

2 голосов
/ 25 марта 2010

Ваш "mainBox" не имеет ширины, установленной на 100%, как все остальные. Это может вызвать те проблемы, которые вы видите. Когда вы вкладываете кучу контейнеров, требуется всего один, чтобы все испортить. Разорвать одно звено в этой цепочке, и возникнут проблемы.

...