首页 > 解决方案 > Flutter 中带有内嵌图像的文本

问题描述

我正在尝试使用左对齐或右对齐的图像和环绕图像的文本创建布局。是否可以用 Flutter 构建这种布局?

这是我要创建的布局:

例子

标签: flutterflutter-layout

解决方案


@Tiziano 在特定情况下工作。对于具有复杂内联图像的更一般情况,现在我可以看到除了使用内联 HTML webview 和style="float: left"HTML 属性之外的其他方式。我正在为这个功能做一个 PR(webview 加载 HTML 字符串)https://github.com/flutter/plugins/pull/1312

const WebView(
              htmlString: """
<u><em><strong>You can do HTML too!</strong></em></u><br />
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" style="float: left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" style="float: right"> 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              """,
            ),

在此处输入图像描述


推荐阅读