Comment utiliser la mise en page automatique tout en conservant un certain contrôle?

Question

J'ai deux panneaux et un bouton imbriqué dans une hbox. Je veux que les panneaux apparaissent côte à côte et que le bouton apparaisse sous les deux panneaux à égale distance des côtés de la hbox (c'est-à-dire au centre).

Il était facile de placer les panneaux côte à côte, mais comment placer le bouton sous les deux panneaux et au centre. Actuellement, le bouton s'affiche à droite du deuxième panneau.

Answer 1

Il serait plus facile de répondre si vous montrez votre code.

mais, je vois deux approches.

Utiliser des conteneurs imbriqués, quelque chose comme ceci:

<mx:HBox> 
<mx:VBox> 
    <mx:panel /> 
    <mx:panel /> 
</mxVBox> 
<mx:button /> 
</mx:HBox> 

Cela fonctionne, mais il ajoute des conteneurs en excès à votre application, ce qui à long terme peut entraîner des problèmes de performance.

La seconde approche consiste à étendre UIComponent et à utiliser updateDisplayList pour calculer la taille et le positionnement de vos enfants. C'est plus compliqué, mais cela vous donne beaucoup plus de contrôle. Je ne suis pas assez aventureux pour écrire du code réel pour que dans le navigateur, mais le code psuedo pourrait être quelque chose comme ceci:

override public function updateDisplayList(unscaledHeight:Number, unscaledWidth: Number){ 
panel1.x = 0 
panel1.y = 0; 
panel2.x = panel1.width; 
pane2.y = 0 
button.x = panel1.height; 
button.y = 0; 
} 

Ce serait mon approche préférée, bien qu'il ne soit pas aussi simple que le premier.