求Flutter中Flow组件实现条件对齐布局的示例

嘿，我明白你想要实现的效果——类似CSS里的左右浮动，空间充足时两个元素相邻排列，宽度不够时自动堆叠，而且上方元素左对齐、下方元素右对齐对吧？其实不用纠结Flow组件啦，它更适合复杂的高性能布局场景（比如大量子元素的动画交互），对于你的需求，用CustomMultiChildLayout就能轻松搞定，代码直观还容易维护。

核心思路 #

我们需要动态判断父容器的可用宽度：

• 如果两个元素的总宽度（含间距）小于等于父容器宽度，就把它们并排摆放，左元素居左、右元素居右
• 如果宽度不够，就把两个元素垂直堆叠，上方元素左对齐，下方元素靠右侧对齐

完整实现代码 #

首先定义一个自定义布局组件：

import 'package:flutter/material.dart';

class FloatAdaptiveLayout extends StatelessWidget {
  final Widget leftChild;
  final Widget rightChild;
  final double spacing; // 元素之间的间距

  const FloatAdaptiveLayout({
    super.key,
    required this.leftChild,
    required this.rightChild,
    this.spacing = 8.0,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return CustomMultiChildLayout(
          delegate: _FloatLayoutDelegate(
            maxAvailableWidth: constraints.maxWidth,
            spacing: spacing,
          ),
          children: [
            LayoutId(id: 'left', child: leftChild),
            LayoutId(id: 'right', child: rightChild),
          ],
        );
      },
    );
  }
}

// 自定义布局代理，控制子元素的位置和尺寸
class _FloatLayoutDelegate extends MultiChildLayoutDelegate {
  final double maxAvailableWidth;
  final double spacing;

  _FloatLayoutDelegate({
    required this.maxAvailableWidth,
    required this.spacing,
  });

  @override
  void performLayout(Size size) {
    // 先计算两个子元素的固有尺寸
    final leftSize = layoutChild('left', BoxConstraints.loose(size));
    final rightSize = layoutChild('right', BoxConstraints.loose(size));

    final totalRequiredWidth = leftSize.width + spacing + rightSize.width;

    if (totalRequiredWidth <= maxAvailableWidth) {
      // 宽度充足：并排布局
      positionChild('left', const Offset(0, 0));
      positionChild('right', Offset(leftSize.width + spacing, 0));
      // 设置整个布局的总尺寸
      setSize(Size(totalRequiredWidth, max(leftSize.height, rightSize.height)));
    } else {
      // 宽度不足：垂直堆叠
      positionChild('left', const Offset(0, 0));
      // 下方元素右对齐：父容器宽度 - 元素自身宽度
      positionChild('right', Offset(maxAvailableWidth - rightSize.width, leftSize.height + spacing));
      setSize(Size(maxAvailableWidth, leftSize.height + spacing + rightSize.height));
    }
  }

  @override
  bool shouldRelayout(_FloatLayoutDelegate oldDelegate) {
    // 当可用宽度或间距变化时，重新布局
    return maxAvailableWidth != oldDelegate.maxAvailableWidth ||
        spacing != oldDelegate.spacing;
  }
}

使用示例 #

把你的实际元素替换进去就行：

FloatAdaptiveLayout(
  spacing: 12.0, // 自定义间距
  leftChild: Container(
    width: 160,
    height: 60,
    color: Colors.lightBlueAccent,
    child: const Center(child: Text('左侧元素', style: TextStyle(color: Colors.white))),
  ),
  rightChild: Container(
    width: 140,
    height: 60,
    color: Colors.pinkAccent,
    child: const Center(child: Text('右侧元素', style: TextStyle(color: Colors.white))),
  ),
)

为什么不用Flow组件？ #

Flow组件的优势是高性能处理大量子元素的动画布局，它需要你手动编写复杂的变换矩阵来控制每个子元素的位置，学习成本高，对于这种简单的自适应布局来说有点大材小用。而CustomMultiChildLayout的API更直观，通过布局代理就能清晰控制每个子元素的位置，代码可读性更强。

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