Problème de mise en page Flex - Label: un texte plus court signifie une étiquette plus large

Question

Est-ce que quelqu'un pourrait savoir pourquoi le code suivant a pour résultat que la première étiquette est plus large que la seconde? La première boîte (texte plus court) mesure 21 pixels de largeur, la seconde boîte 19 pixels.

<mx:VBox> 
    <mx:HBox id="lbl1" backgroundColor="#6789ad"> 
     <mx:Label fontWeight="bold" color="white" text="0" /> 
    </mx:HBox> 
    <mx:HBox id="lbl3" backgroundColor="#6789ad"> 
     <mx:Label fontWeight="bold" color="white" text="12" /> 
    </mx:HBox> 
</mx:VBox> 

Je l'ai couru sur Flex 3.4 et Flex 3.5. Même chose mais différent avec Flex 4, première case 20 pixels, seconde 19 encore.

Vive Tom

Answer 1

Le coupable peut être la fonction getMinimumText dans mx.controls.Label --essentially il applique une largeur minimale de 2 caractères sur les étiquettes (en particulier , mesure toutes les étiquettes de caractères 0 ou 1 comme si elles contenaient "Wj"). Pour voir si c'est le cas, essayez de remplacer votre "12" texte par "Wj" et voir si elles sortent de la même taille.

getMinimumText est remplacée dans SliderLabel pour faire au minimum 1 caractère ("W") à la place. Je suppose qu'il fait cela pour permettre le centrage des étiquettes de 1 caractère (sur les graduations du curseur). C'est tout ce que SliderLabel fait, donc vous pourriez juste l'utiliser à la place.

Answer 2

Si vous ne définissez pas une largeur sur un conteneur, il va seulement être aussi grand que le contenu ont besoin d'être. Essayer de définir une largeur sur chacun des conteneurs HBox - explicite, comme dans width="50", ou en pourcentage, comme dans width="100%". Un pourcentage de largeur fera le HBox remplir la largeur du parent VBox.

<mx:VBox> 
    <mx:HBox id="lbl1" backgroundColor="#6789ad" width="50"> 
     <mx:Label fontWeight="bold" color="white" text="0" /> 
    </mx:HBox> 
    <mx:HBox id="lbl3" backgroundColor="#6789ad" width-"50"> 
     <mx:Label fontWeight="bold" color="white" text="12" /> 
    </mx:HBox> 
</mx:VBox> 

ou

<mx:VBox width="50"> 
    <mx:HBox id="lbl1" backgroundColor="#6789ad" width="100%"> 
     <mx:Label fontWeight="bold" color="white" text="0" /> 
    </mx:HBox> 
    <mx:HBox id="lbl3" backgroundColor="#6789ad" width="100%"> 
     <mx:Label fontWeight="bold" color="white" text="12" /> 
    </mx:HBox> 
</mx:VBox> 

Donnez un coup de feu ....