Как предотвратить контейнер в itemRenderer, превышающий ширину контейнера списка?

В проекте 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 просто не превысит этого, но ... это не ... он просто убегает. Я попытался установить максимальную ширину, но это не позволяет вам вводить проценты. И просто повторить еще раз. Я знаю, что если я установил 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? Я в тупике.

РЕДАКТИРОВАТЬ: Вот несколько снимков экрана, которые помогут проиллюстрировать проблему: введите описание изображения здесь введите описание изображения здесь


layout actionscript-3 apache-flex mxml itemrenderer
person brybam    schedule 02.07.2011    source источник
comment
Ваш список устанавливает variableRowHeight в значение true? Могут помочь скриншоты и / или полный рабочий образец.   -  person JeffryHouser    schedule 02.07.2011
comment
Я добавил несколько снимков экрана, чтобы проиллюстрировать проблему. Я не думаю, что в списках Spark Mobile есть variableRowHeight, похоже, не существует. Но, как вы можете видеть на втором снимке экрана, он регулирует высоту, когда ширина установлена ​​на 100%. Я просто не понимаю, почему bubble_lable_group превышает msg_container. Я думаю, поскольку я ничего не уточняю, он просто думает, что может работать.   -  person brybam    schedule 02.07.2011
comment
В Spark вы устанавливаете переменнуюRowHeight в классе макета; не настоящий список.   -  person JeffryHouser    schedule 02.07.2011

Ответы (2)


arrow_upward
3
arrow_downward

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

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

Похоже на хак, но у меня работает :)

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

person Brian Genisio    schedule 02.07.2011
comment
Хм, хорошо работает! тогда спасибо! ... Но это дает мне несколько предупреждений, Multiple markers at this line: -Data binding will not be able to detect assignments to "paddingLeft" Я не совсем уверен, почему это работает ... Я пробовал {width - msg_container.width} и просто {msg_container.paddingLeft}, но ни один из них не работал. Вы действительно думаете, что это единственный способ сделать это? Эти предупреждения меня до чертиков разозлят. А по поводу класса ItemRenderer есть еще вариант? Я знаю о рендерере IconItem, но не думаю, что вы можете настроить его так, как я. - person brybam; 02.07.2011
comment
Вы получаете эту ошибку, потому что paddingLeft не [Bindable]. Первоначальная привязка работает, но обновления этой переменной - нет. Об этом сообщает предупреждение. В этом случае не проблема, потому что paddingLeft не меняется. Может быть, есть лучший способ сделать это ... но это я придумал :) ItemRenderer, IconItemRenderer, AS-Only идут от простого к самому сложному, но от медленного к самому быстрому. Вы МОЖЕТЕ заставить это работать с IconItemRenderer или рендерерами AS-Only ... это просто сложнее. - person Brian Genisio; 02.07.2011
comment
Чтобы исправить это предупреждение, либо создайте другую группу между bubble_label_group и ее родительским элементом, ширина которого равна 100%, а верхняя имеет отступ, чтобы внутренняя группа просто привязывалась к ширине предыдущей (без необходимости заполнения). Либо так, либо используйте событие завершения создания, чтобы установить его вручную. - person J_A_X; 02.07.2011

arrow_upward
0
arrow_downward

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

person csomakk    schedule 22.12.2013