Flutter 中带有内嵌图像的文本答案

【问题标题】：Text with inline images in FlutterFlutter 中带有内嵌图像的文本
【发布时间】：2018-10-30 07:18:27
【问题描述】：

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

这是我正在尝试创建的布局：

【问题讨论】：

我知道这是一个相对较老的问题，但如果您仍然感兴趣，我想我可以帮助您。但我需要知道 - 你可以接受必须事先为图像设置大小的限制吗？不这样做可能是可能的，但如果指定大小肯定会容易得多。
@rmtmckenzie 即使提问者没有回应，也请提供您的解决方案，您的回答可能对其他人有所帮助:)
@rmtmckenzie 是的，很高兴看到您的解决方案 :)

【解决方案1】：

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

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

【讨论】：

很棒的插件。但是是否可以为标题文本和正文指定不同的字体大小？
我正在使用这个插件，但我有一个问题：github.com/mtiziano/drop_cap_text/issues/14

【解决方案2】：

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

【讨论】：

【解决方案3】：

遗憾的是，目前 Flutter 不支持这种文本换行。您可以在图片前面换行，但不能在图片下方换行。

【讨论】：

【解决方案4】：

您可以创建一个Container 并用ClipPath 将其剪裁成文本形状。之后，要将所有内容放在一起，请在 Stack 中添加 Container 和 Image。

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

在您的自定义 CustomClipper 中，您只需剪切图像应该占据的部分，Flutter 将确保不在该部分呈现任何子 Widget。

【讨论】：

我试过这个，它确实会剪切文本。但它不会围绕它路由文本。所以它只是模糊了文本

【解决方案5】：

是的，现在可以在 Flutter 中构建这种布局。例如这段代码：

import 'package:float_column/float_column.dart';

FloatColumn(
  children: [
    Floatable(
      float: FCFloat.start,
      maxWidthPercentage: 0.33,
      padding: const EdgeInsetsDirectional.only(end: 12),
      child: Image(image: AssetImage('bill-gates.jpeg')),
    ),
    const WrappableText(
        text: TextSpan(
            text: 'A floating image',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))),
    const WrappableText(
        text: TextSpan(
            text:
                'Iste quidem veteres inter ponetur honeste...')),
  ],
)

产生这个：

【讨论】：