Flex - проблема с разметкой метки: более короткий текст означает более широкую метку - PullRequest
Новая
       31

Flex - проблема с разметкой метки: более короткий текст означает более широкую метку

1 голос
/ 01 марта 2010

Кто-нибудь знает, почему следующий код приводит к тому, что первая метка шире, чем вторая? Первый блок (более короткий текст) имеет ширину 21 пиксель, второй блок - 19 пикселей. 

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

Я запускал это на Flex 3.4 и Flex 3.5. То же самое, но отличается от Flex 4, первый блок 20 пикселей, второй 19 раз.

Приветствие Том

Ответы [ 2 ]

4 голосов
/ 01 марта 2010

Причиной может быть функция getMinimumText в mx.controls.Label - по сути, она обеспечивает минимальную ширину в 2 символа для меток (в частности, для меток любых 0 или 1 символов, как если бы они содержали «Wj»).

Чтобы увидеть, не так ли это, попробуйте заменить текст "12" на "Wj" и посмотреть, получаются ли они одинакового размера.

getMinimumText переопределяется в SliderLabel, чтобы вместо него сделать минимальный 1 символ ("W"). Я предполагаю, что это делает это, чтобы разрешить центрирование надписей из 1 символа (над галочками слайдера). Это все, что делает SliderLabel, поэтому вы можете просто использовать его вместо этого.

1 голос
/ 01 марта 2010

Если вы не установите ширину контейнера, он будет только настолько большим, насколько это необходимо для содержимого. Попытка установить ширину для каждого из HBox контейнеров - явно, как в width="50", или в процентах, как в width="100%". В процентном соотношении HBox заполнит ширину родительского элемента VBox.

* +1007 *

или 

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

Дайте ему шанс ...

...