Flutter中能否实现图片左/右对齐、文字环绕的布局？

当然可以啦！在Flutter里实现这种文字环绕左右对齐图片的布局完全没问题，我给你分享两种实用的实现思路，你可以根据需求选择：

方法一：使用float_column第三方包（简单快捷） #

这个包专门为文字环绕元素的场景设计，已经处理好了各种换行、间距的边界情况，上手非常容易：

1. 先在项目的pubspec.yaml中添加依赖：

dependencies:
  float_column: ^3.0.0 # 建议使用最新版本

2. 然后就可以编写代码实现你要的效果了：

import 'package:float_column/float_column.dart';

FloatColumn(
  children: [
    // 左对齐图片，文字在右侧环绕
    Floatable(
      float: Float.left,
      child: Padding(
        padding: const EdgeInsets.only(right: 8.0, bottom: 4.0),
        child: Image.network('你的图片地址', width: 100, height: 100),
      ),
    ),
    // 第一段文本
    TextSpan(
      text: '这里可以放入大段的文本内容，当文本遇到左侧的图片时，会自动环绕到图片下方，完全符合你示例里的效果。你可以多写一些内容测试下，看看换行和环绕的表现是否符合预期。',
      style: TextStyle(fontSize: 16),
    ),
    // 右对齐图片，文字在左侧环绕
    Floatable(
      float: Float.right,
      child: Padding(
        padding: const EdgeInsets.only(left: 8.0, top: 4.0),
        child: Image.network('另一张图片地址', width: 100, height: 100),
      ),
    ),
    // 第二段文本
    TextSpan(
      text: '这部分文本会从右侧图片的左侧开始排列，当文本长度超过图片高度后，会自然延伸到图片下方，完美实现文字环绕的布局效果。',
      style: TextStyle(fontSize: 16),
    ),
  ],
)

方法二：自定义RenderObject（不依赖第三方包） #

如果你不想引入外部依赖，也可以通过自定义RenderObject来实现，不过相对复杂一些，需要自己处理布局逻辑：

下面是一个简化版的实现框架，你可以根据需求完善细节：

// 自定义Widget
class WrapImageText extends MultiChildRenderObjectWidget {
  WrapImageText({
    super.key,
    required Widget image,
    required Widget text,
    required bool isLeftAligned,
  }) : super(children: [image, text]);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderWrapImageText(isLeftAligned: isLeftAligned);
  }
}

// 对应的RenderObject
class RenderWrapImageText extends RenderBox
    with ContainerRenderObjectMixin<RenderBox, WrapImageTextParentData> {
  final bool isLeftAligned;

  RenderWrapImageText({required this.isLeftAligned});

  @override
  void performLayout() {
    // 获取子组件
    final imageChild = firstChild;
    final textChild = lastChild;

    // 先布局图片
    imageChild.layout(constraints.loosen(), parentUsesSize: true);
    final imageSize = imageChild.size;

    // 计算文本的布局约束，避开图片区域
    final textConstraints = constraints.deflate(
      isLeftAligned
          ? EdgeInsets.only(left: imageSize.width + 8)
          : EdgeInsets.only(right: imageSize.width + 8),
    );
    textChild.layout(textConstraints, parentUsesSize: true);

    // 确定整体布局尺寸
    size = Size(
      constraints.maxWidth,
      max(imageSize.height, textChild.size.height),
    );

    // 设置图片的偏移位置
    (imageChild.parentData as WrapImageTextParentData).offset = Offset(
      isLeftAligned ? 0 : size.width - imageSize.width,
      0,
    );
    // 设置文本的偏移位置
    (textChild.parentData as WrapImageTextParentData).offset = Offset(
      isLeftAligned ? imageSize.width + 8 : 0,
      0,
    );
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // 绘制子组件
    defaultPaint(context, offset);
  }
}

// 使用示例
WrapImageText(
  isLeftAligned: true,
  image: Image.network('你的图片地址', width: 100, height: 100),
  text: Text('这里是需要环绕的文本内容，你可以替换成自己的文本。'),
)

注意：这个自定义版本只是基础实现，如果需要处理多行文本的复杂换行逻辑，还需要进一步完善代码。

总的来说，如果你追求快速实现，优先推荐用float_column包，它已经帮你处理了大部分复杂的布局细节，能节省不少时间。

内容的提问来源于stack exchange，提问作者Dan