2010-03-17 4 views
2

Tout ce que j'essaie de faire est de placer un bouton à l'intérieur d'un panneau, tourner ce bouton (donc il est vertical) et placez-le sur le bord du panneau. Je ne peux pas sembler le faire correctement. Voici mon code:flex positionnement d'un bouton dans un panneau

<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> 

Si vous regardez la partie du script, vous verrez que je suis en train de tourner et se déplacer vers la gauche. J'essaie juste de le déplacer quelque part, et rien ne fonctionne. En outre, le texte semble disparaître lorsque je le fais pivoter sur un axe de 90%. Quelqu'un sait ce que je peux faire pour cela?

Répondre

1

Pour faire pivoter le texte, vous devez intégrer la police. Je vais jouer et voir si je peux vous obtenir une réponse plus complète pour votre autre problème.

OK, voici quelques-uns de vos problèmes.

1) Le x de votre panneau est -500 donc il est WAY de l'écran, peut-être vous avez besoin de cela pour une raison quelconque, mais dans mon test, il a juste poussé hors de vue.

2) rotation nécessite l'incorporation des polices

3) lorsque vous faites pivoter l'un des composants de l'interface utilisateur dans une autre pivot par défaut est sur le coin supérieur gauche, alors quand le bouton tourne, il tourne en fait hors de la vue. Ce n'est pas facile à comprendre quand vous le lisez donc voici un visuel, considérez le coin supérieur gauche du conteneur comme 0,0 en coordonnées XY:

hbox normal/bouton mise en page:

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

pivotée mise en page:

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

Voyez comment le bouton a tourné à l'extérieur de la zone visible (dans votre cas, il ne se trouve plus sur le panneau) solution serait d'utiliser une toile ou quelque chose qui vous permettra de tirer loin le HBox à partir du bord du panneau.

+0

J'adore la rapidité avec laquelle les gens réagissent ici. Je vous remercie. – pfunc

+0

+1 Bons diagrammes, bonne explication. La rotation est un concept difficile à saisir pour les gens. – Robusto

+0

Merci, c'est aussi aider à comprendre pourquoi les polices non incorporées n'apparaissent pas. Ils sont "en couches" dans le bouton où il serait normalement X, Y sage, puis vous tournez le contrôle hors du chemin sans que la police ne bouge. comme couper un ensemble dans une paix de papier et le déplacer sur le dessus d'un autre. – invertedSpear

1

Utilisez mx: Canvas et pour la largeur à 100%, comme ceci:

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

InvertedSpear a répondu à l'autre partie de votre question, je ne vais pas le répéter.

Questions connexes