在Flutter中使用内嵌图像的文本

Question

我正在尝试使用左对齐或右对齐图像以及包裹图像的文本创建布局。是否可以使用Flutter构建这种布局？

这是我想要创建的布局：

Answer 1

我发布了一个qazxsw poi来实现DropCapText，你也可以插入一个图像作为自定义DropCap，结果如下

package: drop_cap_text

Answer 2

可悲的是，现在Flutter不支持这种文本换行。您可以将文本包装在图片前面但不在其下面。

Answer 3

您可以创建一个

DropCapText(
  loremIpsumText,
  dropCap: DropCap(
  width: 100,
  height: 100,
  child: Image.network(
    'https://www.codemate.com/wp-content/uploads/2017/09/flutter-logo.png')
  ),
),

并用文本形状的Container剪辑它。在那之后，把所有东西放在一起你在ClipPath中添加这个Container和Image。

Stack

在您的自定义

Widget build(BuildContext context) {
    return Stack(
        children: [
            _buildImageWidget(),
            ClipPath(
                clipper: MyCustomClipper(),
                child: _buildTextWidget(),
            ),
        ],
    );
}

中，您只需剪切图像应占据的部分，而Flutter将确保不会在该部分中渲染任何子Widget。

Answer 4

@Tiziano在特定情况下工作。对于具有复杂内联图像的更一般情况，现在我可以看到除了使用内联HTML webview和CustomClipper HTML属性之外的其他方式。我正在为此功能制作PR（webview加载HTML字符串）style="float: left"

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.
              """,
            ),