Flex Mobile Text环绕图像

Question

我正在尝试为Flex Mobile应用程序创建一个组件，这个组件允许我有一个文本环绕它的图像，这在文章或博客文章中很常见。使用HTML，可以使用以下标记来完成：

<image align='right' /> associated text...

我尝试创建一个s：TextArea，并将其文本设置为这样的HTML字符串：

StyleableTextField(textArea.textDisplay).htmlText = htmlString

但是这种方法似乎不支持图像。我可以使用单独的图像和文本组件，但是文本不会以我想要的方式环绕图像。

有人能提出更好的方法吗？

Answer 1

这可以使用TextFlow执行，显示为：

  

使用TextConverter importToFlow()作为作曲家来组合html：

<?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">

    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.elements.TextFlow;

            private const text:String = "<img src='http://www.google.com/images/srpr/logo4w.png' " +
                "align='right' width='138' height='48' />Lorem ipsum dolor sit amet, " +
                "consectetur adipiscing elit. Nunc sodales posuere elit nec convallis. " +
                "Vivamus lacinia consectetur tortor, in convallis diam ornare sit amet. " +
                "Morbi volutpat volutpat aliquet. Praesent hendrerit nibh et magna feugiat " +
                "laoreet. Maecenas congue rhoncus tincidunt. Aliquam libero dui, scelerisque " +
                "eu convallis at, consectetur vitae dolor. Nunc quis posuere tellus.";
        ]]>
    </fx:Script>

    <s:RichEditableText editable="false"
                        selectable="true"
                        textFlow="{TextConverter.importToFlow(text, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
                        buttonMode="true"
                        width="100%"
                        height="100%" />

</s:Application>

请注意，AIR也有StageWebView，它使用设备操作系统提供的系统Web控件。