s:RichEditableText 组件中的 Flex 4 文本渲染

Question

我很好奇是否有人可以阐明 Spark RichEditableText 组件中一些奇怪的文本渲染行为。

<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"

creationComplete="handleApplicationCreationComplete()"
>
<fx:Script>
    <![CDATA[
        import flashx.textLayout.conversion.TextConverter;

        private static const DATA:Array =
        [
            "First sentence. This is a test of text rendering. How's it look?",
            "Let's see if this actually works correctly.",
            "Add some variety with the <b>bold</b> tag...",
            "Throw in a <a href='http://www.example.com'>link</a> as well!",
            "Well?! Does it work as expected? I think not..."
        ];

        private var currentIdx:int;

        protected function handleNextClick():void
        {
            currentIdx++;
            if(currentIdx >= DATA.length)
                currentIdx = 0;
            display(currentIdx);
        }

        protected function handleApplicationCreationComplete():void
        {
            currentIdx = 0;
            display(currentIdx);
        }

        private function display(idx:int):void
        {
            contentDisplay.textFlow = TextConverter.importToFlow(DATA[idx], TextConverter.TEXT_FIELD_HTML_FORMAT);
        }
    ]]>
</fx:Script>

<s:layout>
    <s:VerticalLayout />
</s:layout>

<s:VGroup width="100">
    <s:RichEditableText id="contentDisplay"
        width="100%"
        enabled="false" mouseEnabled="false"
        editable="false" focusEnabled="false"
    />
</s:VGroup>
<s:Button label="Next" click="handleNextClick()" />
</s:Application>

上面的应用程序只是简单地浏览 DATA 数组中的五个句子（每次按下 Next 按钮时）。无论出于何种原因，RichEditableText 组件在设置新内容之前不会完全重置其视图（通过清除以前的文本）。据我所知，这种错误的渲染在某种程度上是基于行数和相对宽度的组合。我还发现，如果我将 RichEditableText 组件的 width 属性设置为绝对值（例如 100），而不是相对值（百分比） , 100%) 文本渲染正确。

据我所知，这种行为是无意的，实际上是一个错误。

Answer 1

没有解决办法，这是框架中的一个错误...

Answer 2

这是 4.1 SDK 中的一个错误。要解决此问题，您可以清除 RTE，然后在后续帧上更新它。

callLater(function workAround(richEditableText:RichEditableText, updateText:String):void
{
    richEditableText.text = updateText;
}
, [ myRichEditableTextComponent, myNewMessageText ]);

只需将此代码放置在您之前更新 RET 的位置并传递组件和新文本即可。如果您使用文本流，这应该是相同的，只需用流替换文本和文本字符串即可。