如何在Flutter中实现类似CSS float属性的文本环绕布局

Flutter没有像CSS那样原生的float属性，但可以通过布局组件实现你要的效果：图片右浮、文本环绕图片，且图片下方的文本自动撑满整个宽度。下面提供两种可行方案：

方案一：用Wrap组件快速实现（适合简单场景） #

Wrap组件会自动调整子元素的排列，当文本宽度不足以和图片并排时，会自动换行到图片下方并铺满整个容器宽度。

Wrap(
  alignment: WrapAlignment.start,
  children: [
    // 限制图片宽度，避免过宽
    ConstrainedBox(
      constraints: const BoxConstraints(maxWidth: 150),
      child: Image.network(
        'https://i.sstatic.net/vEJgABo7.jpg',
        fit: BoxFit.cover,
      ),
    ),
    // 文本部分，Flexible确保文本占据剩余空间
    Flexible(
      child: Text(
        '''这里是需要环绕图片的文本内容，示例文本：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. 这里是图片下方会自动撑满宽度的文本部分，当文本足够长时，会在图片下方自动铺满整个容器宽度。''',
        softWrap: true,
      ),
    ),
  ],
)

方案二：自定义布局代理（适合复杂排版需求） #

如果需要更精确控制文本和图片的排版逻辑，可以用CustomMultiChildLayout实现自定义布局：

// 自定义布局代理
class FloatRightLayoutDelegate extends MultiChildLayoutDelegate {
  final double imageWidth;
  final double imageHeight;

  FloatRightLayoutDelegate({required this.imageWidth, required this.imageHeight});

  @override
  void performLayout(Size size) {
    // 把图片定位到容器右侧
    final imageSize = layoutChild(
      'image',
      BoxConstraints.tightFor(width: imageWidth, height: imageHeight),
    );
    positionChild('image', Offset(size.width - imageWidth, 0));

    // 布局文本，利用Text自动换行的特性，实现环绕效果
    final textSize = layoutChild(
      'text',
      BoxConstraints(maxWidth: size.width),
    );
    positionChild('text', Offset.zero);
  }

  @override
  bool shouldRelayout(covariant FloatRightLayoutDelegate oldDelegate) {
    return imageWidth != oldDelegate.imageWidth || imageHeight != oldDelegate.imageHeight;
  }
}

// 使用自定义布局
CustomMultiChildLayout(
  delegate: FloatRightLayoutDelegate(
    imageWidth: 150,
    imageHeight: 200,
  ),
  children: [
    LayoutId(
      id: 'image',
      child: Image.network(
        'https://i.sstatic.net/vEJgABo7.jpg',
        fit: BoxFit.cover,
      ),
    ),
    LayoutId(
      id: 'text',
      child: Text(
        '''这里是需要环绕图片的文本内容，示例文本：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. 这里是图片下方会自动撑满宽度的文本部分，当文本足够长时，会在图片下方自动铺满整个容器宽度。''',
        softWrap: true,
      ),
    ),
  ],
)

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