Question

在Flex Mobile项目中，我有一个简单的itemRenderer，我正在尝试创建一个“泡泡”短信效果，类似于ichat或iphone（只是让你得到我想要的东西）。但是，如果文本比屏幕更长，那么就不会只是沿着一条线走。

如果我将Group设置为持有矩形（以创建气泡效果）并将标签设置为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宽度设置为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>

我可以用什么想法或技巧来实现我想要的效果并将其全部保存在父列表容器中？我很难过。

编辑：以下是一些帮助说明问题的屏幕截图： enter image description here

Answer 1

好吧，看起来你想要设置maxWidth属性。只有，你只能用像素而不是百分比来设置。我猜你自己在移动设备上，你不想设置绝对像素。 Soooo，如果你做了一些有点棘手的事情怎么办？数据将最大宽度绑定为渲染器的宽度减去消息容器的填充...

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

感觉像是黑客，但它对我有用：）

注意：在移动设备中使用标准ItemRenderer类效率非常低。这对你来说可能不是问题，但要注意它。有关详细信息，请参阅360Flex的此演示文稿：http://zaa.tv/2011/06/360flex-denver-2011-flex-performance-tips-and-tricks/

Answer 2

我正在寻找一个不同的问题，但这可能对clipAndEnableScrolling =“true”有帮助

如何防止itemRenderer中的容器超出列表容器的宽度？

2 个答案: