Flex3中文本的流畅布局

In my Flex3 app I have some floating windows which contain variable amounts of text. The windows are meant to be user-resizable. Currently, while I can resize the windows OK, I can't get the text in a TextArea in the window to re-flow when the window is resized. I've come across blog postings that there's a size bug in TextArea that means that setting the text content does not re-size the TextArea properly, together with suggested workarounds. In my case, the content stays the same but the geometry of the container changes. What seems to be happening is that the TextArea adopts a fixed size when it is first rendered, and no amount of resizing the container changes that. Can anyone suggest a means of creating a fluid text area in Flex?

在我的Flex3应用程序中,我有一些浮动窗口,其中包含可变数量的文本。窗口是用户可调整大小的。目前,虽然我可以调整窗口的大小,但是当窗口调整大小时,我无法在窗口的TextArea中获取文本以重新流动。我发现博客帖子中有TextArea中存在大小错误,这意味着设置文本内容不会正确地重新调整TextArea的大小,以及建议的解决方法。就我而言,内容保持不变,但容器的几何形状发生了变化。似乎正在发生的事情是TextArea在首次渲染时采用固定大小,并且没有调整容器大小的数量会改变它。任何人都可以建议在Flex中创建流畅的文本区域吗?

Ian

4 个解决方案

#1

By binding the textArea's width to its container's with, you can manage to keep the margins and borders and don't have to deal with percentages.
Also, your textArea will be resized each time its parent changes in size.
i'm thinking of something like this:

通过将textArea的宽度绑定到其容器的宽度,您可以设法保留边距和边框,而不必处理百分比。此外,每次其父级更改大小时,都会调整textArea的大小。我在考虑这样的事情:

<fx:Script>
    <![CDATA[
        import spark.layouts.supportClasses.LayoutBase;

        protected function onButtonClicked(event:MouseEvent):void
        {
            currentState = (event.target.selected ? 'largeState' : 'smallState');
        }

    ]]>
</fx:Script>
<s:TitleWindow id="window" width="300" height="200">
    <s:TextArea width="{window.width - 10}" height="{window.height - 60}" 
        text="{IMyConsts.LOREMIPSUM}" borderVisible="false" />
    <s:ToggleButton id="btnEffect" bottom="5"  click="onButtonClicked(event)"
        label="{btnEffect.selected ? 'Go smaller' : 'Go larger'}" />
</s:TitleWindow>
<s:states>
    <s:State name="smallState" />
    <s:State name="largeState" />
</s:states>
<s:transitions>
    <s:Transition fromState="smallState" toState="*">
        <s:Resize target="{window}" widthTo="400" heightTo="300" />
    </s:Transition>
    <s:Transition fromState="largeState" toState="*">
        <s:Resize target="{window}" widthTo="300" heightTo="250" />
    </s:Transition>
</s:transitions>

#2

I found a great example of fluid windows please do visit it. They provide source code also so may be you would get better idea.

我发现了流体窗户的一个很好的例子,请访问它。他们也提供源代码,所以你可能会有更好的想法。

http://examples.adobe.com/flex3/devnet/dashboard/main.html

#3

You could try Text Layout Framework from Adobe: http://labs.adobe.com/technologies/textlayout/

您可以尝试Adobe的Text Layout Framework:http://labs.adobe.com/technologies/textlayout/

#4

I can take a whack at this... but don't laugh.. I am not sure if you need to use a particular container but in any event, set the width and height to 100% and use Grid > GridRow and GridItem to size and resize Text Control you can specify the width of the table or just use it just like an HTML table in Flex to manipulate the size of controls and containers....

我可以对此嗤之以鼻......但是不要笑......我不确定你是否需要使用特定的容器,但无论如何,将宽度和高度设置为100%并使用Grid> GridRow和GridItem来大小和调整大小文本控制您可以指定表的宽度或只是像在Flex中的HTML表一样使用它来操纵控件和容器的大小....

hope that helps...

希望有帮助......