Flex Mobile 文本环绕图像

Question

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

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

我尝试创建一个 s:TextArea，并将其文本设置为 HTML 字符串，如下所示：

StyleableTextField(textArea.textDisplay).htmlText = htmlString

但是这个方法好像不支持图片。我可以使用单独的图像和文本组件，但文本不会按照我想要的方式环绕图像。

谁能提出更好的方法？

Answer 1

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

使用TextConverterimportToFlow()作为composer来组装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控件。