Как запретить контейнеру в itemRenderer превышать ширину списка контейнеров?

Question

В проекте Flex Mobile у меня есть простой itemRenderer, в котором я пытаюсь создать текстовый эффект «пузыря», похожий на ichat или iphone (просто, чтобы вы получили то, к чему я стремлюсь). Но если текст длиннее экрана, он убегает, а не просто идет вниз по строке.

Если я установлю Группу, содержащую прямоугольник (для создания эффекта пузыря) и метку на 100%, она будет работать и не позволит превышать границы контейнеров списка, НО группа всегда на 100% и выглядит плохо, я ' я пытаюсь удержать «пузырь» ПРОСТО вокруг текста.

Так или иначе, в верхней части моего itemRenderer я попытался указать:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%">

А вот мой макет, который я вычислил, так как msg_container имеет ширину 100%, я надеялся, что bubble_lable_group просто не превысит это, но ... это не ... он просто убегает. Я попытался установить максимальную ширину, но это не позволяет вводить проценты. И просто сказать это еще 1 раз. Я знаю, что если я установлю bubble_lable_group width на 100%, он будет работать, и не даст ему сойти с края, но тогда прямоугольник "пузырь" растянется до конца и выглядит просто плохо.

<s:VGroup id="main_container" horizontalAlign="left" paddingBottom="10" paddingTop="10"
              verticalAlign="top" width="100%">

        <s:VGroup id="name_container" width="100%">
            <s:Label id="name_label" fontSize="20" fontWeight="bold" text="Name: " />
        </s:VGroup>

        <s:VGroup id="msg_container" width="100%" paddingLeft="20">
            <s:Group id="bubble_lable_group">
                <s:Rect id="the_bubble_shape" width="100%" height="100%" radiusX="15" radiusY="15" >
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="{grOne}"/>
                            <s:GradientEntry color="{grTwo}"/>
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                <s:Label id="msg_txt" width="100%" text="msg text here"
                         fontSize="18" color="#FFFFFF" paddingTop="15" paddingRight="15" paddingBottom="15" paddingLeft="15"/>
            </s:Group>
        </s:VGroup>

    </s:VGroup>

Какие-нибудь идеи или уловки, которые я мог бы использовать, чтобы добиться эффекта, к которому я стремлюсь, и хранить все это в родительском контейнере List? Я в тупике.

EDIT: Вот несколько скриншотов, чтобы проиллюстрировать проблему:

Answer 1

Ну, похоже, вы хотите установить свойство maxWidth.Только вы можете установить это только с пикселями, а не с процентами.Я предполагаю, что, поскольку вы находитесь на мобильном телефоне, вы не хотите устанавливать абсолютные пиксели.Ооо, что если вы сделали что-то немного сложнее?Данные связывают максимальную ширину с шириной рендерера минус отступы вашего контейнера сообщений ...

<s:Group id="bubble_lable_group" maxWidth="{width - msg_container.paddingLeft}" >  

Похоже на хак, но у меня это работает1007 * ПРИМЕЧАНИЕ: Использование стандартного класса ItemRenderer в Mobile неэффективно.Возможно, это не проблема для вас, но просто знайте об этом.Смотрите эту презентацию от 360Flex для получения дополнительной информации об этом: http://zaa.tv/2011/06/360flex-denver-2011-flex-performance-tips-and-tricks/

Answer 2

Я искал другой вопрос, но это может быть полезно для clipAndEnableScrolling = "true"