Есть ли способ убедиться, что текстовые элементы действительно выровнены по вертикали? - PullRequest
Новая
       66

Есть ли способ убедиться, что текстовые элементы действительно выровнены по вертикали?

1 голос
/ 13 сентября 2011

В прошлом я часто сталкивался с этой проблемой, и на сегодняшний день не нашел хорошего решения, которое бы работало повсеместно.

По сути, проблема заключается в следующем. Если я хочу выровнять вещи по вертикали в контейнере, я буду использовать verticalAlign="middle", но это не совсем решает проблему истинного выравнивания текста по вертикали. Текст всегда слишком высокий по вертикали, поэтому в прошлом я просто корректировал paddingTop и paddingBottom для компенсации, но это не работает, поскольку шрифт для _sans отличается от операционной системы к операционной системе.

Учитывая следующий код компоновки, вы увидите проблему: 

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:Group width="100" height="50">
        <s:Group width="100%" height="100%">
            <s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
                <s:fill>
                    <s:SolidColor color="#333333"/>
                </s:fill>
            </s:Rect>
        </s:Group>

        <s:VGroup width="100%" height="100%" 
                paddingTop="10" paddingBottom="10"
                paddingRight="10" paddingLeft="10"
                verticalAlign="middle">
            <s:Line width="100%">
                <s:stroke>
                    <s:SolidColorStroke color="#CCCCCC" weight="1"/>
                </s:stroke>
            </s:Line>
        </s:VGroup>

        <s:Label text="100 Percent!" top="10" bottom="10" 
                left="10" right="10" verticalAlign="middle"
                textAlign="center" color="#FFFFFF"/>
    </s:Group> 

    <s:layout>
        <s:VerticalLayout horizontalAlign="center"
                verticalAlign="middle"/>
    </s:layout>
</s:Application>

Что происходит, довольно ясно. Горизонтальная линия выравнивается по точной середине поля, но текст смещается на произвольную величину. Я предполагаю, что это из-за выравнивания текста или чего-то еще. Есть ли способ исправить это независимо от размера шрифта и лица? Я бы хотел, чтобы строка проходила по середине текста, игнорируя дополнительное пространство, возможно, необходимое для размещения под логической строкой текста (т.е. игнорируя нижнюю часть "g" и "j" при размещении объектов ).

Ответы [ 3 ]

0 голосов
/ 13 сентября 2011

Попробуйте: 

<s:Group width="100" height="50">
   <s:Line width="100%" verticalCenter="0">
      <s:stroke>
         <s:SolidColorStroke color="#CCCCCC" weight="1"/>
      </s:stroke>
   </s:Line>

   <s:Label text="100 Percent!" horizontalCenter="0" verticalCenter="0"/>
</s:Group>
0 голосов
/ 18 октября 2011

Очевидно, нет, хотя может существовать специальное решение.

0 голосов
/ 13 сентября 2011

Посмотрите на ограничения макета. Вы также можете посмотреть простое связующее выражение для них, чтобы вычислить точные потребности на лету. Хотя они в целом идеальны как есть.

Они также хорошо реагируют на событие события изменения размера.

...