Question

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

这是我想要创建的布局：

example

Answer 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')
  ),
),

Answer 2

遗憾的是，Flutter不支持这种文本换行。您可以在图片前面而不是下面包裹文字。

Answer 3

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

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

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

Answer 4

@Tiziano在特定情况下工作。对于带有复杂内联图像的更一般的情况，到目前为止，除了使用内联HTML Webview和style="float: left" HTML属性外，我还可以看到其他方法。我为此功能（网络视图加载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.
              """,
            ),

Answer 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...')),
  ],
)

产生这个：

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

5 个答案: