2010-03-17 2 views
2

Все, что я пытаюсь сделать, это разместить кнопку внутри панели, повернуть эту кнопку (чтобы она была вертикальной) и поместить ее на край панели. Я не могу сделать это правильно. Вот мой код:гибкое позиционирование кнопки внутри панели

<mx:Panel id="weekList" width="260" height="100%" x="-500" title="Weeks" > 
     <mx:List id="weekButtonList" width="260" borderVisible="false" contentBackgroundAlpha="0" dataProvider="{[email protected]}" itemClick="onWeekClick(event);" > 
      <mx:itemRenderer> 
       <mx:Component> 
        <mx:Button buttonMode="true" right="20" width="260" height="50" label="Week {data}" /> 
       </mx:Component> 
      </mx:itemRenderer> 
     </mx:List> 

     <mx:HBox id="closeButtonHolder" rotation="90" width="100" > 
      <mx:Button label="OPEN" click="weekListToggle()" />  
     </mx:HBox> 

    </mx:Panel> 

Если вы посмотрите на части сценария вы увидите, что я пытаюсь повернуть его и переместить его влево. Я просто пытаюсь переместить его где-то, и ничего не работает. Кроме того, текст, кажется, исчезает, когда я поворачиваю его на 90% -ую ось. Кто-нибудь знает, что я могу сделать для этого?

ответ

1

Для того чтобы повернуть текст, вы должны вставить шрифт. Я поиграю и посмотрю, смогу ли я получить более полный ответ на вашу другую проблему.

ОК, вот некоторые из ваших проблем.

1) x вашей панели -500, так что это ПУТЬ с экрана, возможно, вам это нужно по какой-то причине, но в моем тесте она просто вышла из поля зрения.

2) вращение требует встраивания шрифтов

3) при повороте любого компонента пользовательского интерфейса в другом стержне по умолчанию находится в верхнем левом углу, так что, когда кнопка вращается, он на самом деле вращается вне поля зрения. Это не легко понять, когда вы читаете это так вот визуальное, рассмотрите верхний левый углу контейнера, как 0,0 в XY координат:

нормальные HBox кнопки/расположение:

0,0_________________________________ 
| ________________________________ | 
| |        | | <-container outside 
| |  UI component   | | 
| |______________________________| | 
|__________________________________| 

повернутого расположение:

___________0,0__________________________ 
|   |       | 
| UI  |  container   | 
| component|       | 
|   |       | 
|   |___________________________| 
|   | 
|   | 
|   | 
|   | 
|__________| 

Посмотрите, как кнопка не поворачивается за пределами видимой области (в вашем случае это больше не находится на панели) Решение было бы использовать холст или что-то, что позволит вам вытащить HBox прочь от края панели.

+0

Мне нравится, как быстро люди реагируют здесь. Спасибо. – pfunc

+0

+1 Хорошие диаграммы, хорошее объяснение. Вращение - сложная концепция для понимания людьми. – Robusto

+0

Спасибо, Это также помогает понять, почему не встроенные шрифты не отображаются. Они «многослойны» внутри кнопки, где она обычно будет X, Y мудрой, затем вы поворачиваете элемент управления без возможности перемещения шрифта. как разрезать целое в тишине бумаги и переместить его поверх другого. – invertedSpear

1

Используйте Mx: Холст и установить его ширину до 100%, например, так:

<mx:Canvas width="100%"> 
    <mx:Button buttonMode="true" right="20" width="260" height="50" label="Week {data}" /> 
</mx:Canvas> 

InvertedSpear ответил на вторую часть вашего вопроса, поэтому я не буду повторять это.

Смежные вопросы