Гибкое размещение текста на холсте

#apache-flex #actionscript-3 #mxml

Вопрос:

Вот проблема, с которой я постоянно сталкиваюсь:

У меня есть много ситуаций, когда мне нужно отобразить какой-то текст с помощью стилизованного контейнера, такого как:

 <mx:Canvas>
     <mx:Text text="{text}" left="5" verticalCenter="0" right="5" />    
</mx:Canvas>
 

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

Однако то, что продолжает происходить, заключается в том, что он будет отображать только одну строку текста — независимо от того, сколько раз я вызываю invalidateSize() на нем или контейнере. Что мне делать?

ПРЕДОСТЕРЕЖЕНИЕ: Высота и ширина холста задаются компонентом, который его создает (все это завернуто в пользовательский компонент), поэтому я не могу явно задать ширину или высоту элемента управления текстом…

ПРИМЕЧАНИЕ: Хорошо, может быть, это простое решение, потому что, когда я печатал этот вопрос, я понял это — но вот шанс ответить на простой вопрос!?

Ответ №1:

Текстовому компоненту нужна ширина, если вы хотите, чтобы он автоматически обертывался для вас. Если вы использовали строку с новыми строками, она будет работать так, как вы ожидали, без указания ширины. Для вас используйте:

Редактировать: Хорошо, вы хотите, чтобы он был по центру холста разного размера. Тогда вы сможете:

 <mx:HBox 
    width="500"
    paddingLeft="5"
    paddingRight="5">
    <mx:Spacer width="100%" />
    <mx:Text 
        width="100%"
        text="{text}" />
    <mx:Spacer width="100%" />
</mx:HBox>
 

Комментарии:

1. Я немного прояснил вопрос, но я не буду знать, какова будет ширина холста, на котором будет написан текст, и он изменится 😛

2. затем установите его на 100% и выровняйте текст по центру.

Ответ №2:

Взгляните на компонент TextArea.