16

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

这是我要创建的布局：

例子

4

5 回答 5

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

在此处输入图像描述

于 2019-03-05T15:16:12.300 回答
2

我发布了一个包：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')
  ),
),
于 2019-03-04T20:34:27.843 回答
0

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

于 2018-09-01T23:30:26.440 回答
0

您可以创建一个Container并使用ClipPath以文本的形状对其进行剪辑。之后，要将所有内容放在一起，您可以将thisContainer和Image.Stack

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

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

于 2018-09-17T07:13:20.707 回答
0

是的，现在可以在 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...')),
  ],
)

产生这个：

在此处输入图像描述

于 2021-07-01T21:07:24.590 回答