Flutter实现Row中各Column不同垂直对齐方式（顶/中/底）

要实现Row中不同子Column的独立垂直对齐（顶部、居中、底部），且Row高度由中间Column决定，可以通过以下两种方法实现：

方法一：使用Align + Row(CrossAxisAlignment.stretch)（简单场景） #

如果子列内容长度不会超过中间列的高度，这种方法最快捷。通过将Row的crossAxisAlignment设为CrossAxisAlignment.stretch，让每个子元素填充Row的高度，再用Align组件分别控制各列的对齐方式：

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    // 第一列：顶部对齐
    Expanded(
      child: Align(
        alignment: Alignment.topCenter,
        child: Column(
          children: const [
            Text('顶部内容'),
            Text('更多顶部项'),
          ],
        ),
      ),
    ),
    // 第二列：居中（Row高度由该列内容决定）
    Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          Text('居中内容行1'),
          Text('居中内容行2'),
          Text('居中内容行3'),
        ],
      ),
    ),
    // 第三列：底部对齐
    Expanded(
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Column(
          children: const [
            Text('底部内容'),
            Text('更多底部项'),
          ],
        ),
      ),
    ),
  ],
)

说明：

• Expanded用来平分Row的宽度，也可以用SizedBox指定固定宽度
• CrossAxisAlignment.stretch让每个子元素高度匹配Row的高度，而Row的高度由中间列的内容自动撑开
• 若某列内容长度超过中间列，会导致Row高度被该列拉伸，此时需要用方法二

方法二：自定义MultiChildLayout（精确控制高度） #

如果需要严格保证Row高度仅由中间列决定，无论其他列内容多长，使用CustomMultiChildLayout自定义布局逻辑：

class CustomAlignedRow extends StatelessWidget {
  final Widget topColumn;
  final Widget centerColumn;
  final Widget bottomColumn;

  const CustomAlignedRow({
    super.key,
    required this.topColumn,
    required this.centerColumn,
    required this.bottomColumn,
  });

  @override
  Widget build(BuildContext context) {
    return CustomMultiChildLayout(
      delegate: _RowAlignmentDelegate(),
      children: [
        LayoutId(id: _LayoutIds.top, child: topColumn),
        LayoutId(id: _LayoutIds.center, child: centerColumn),
        LayoutId(id: _LayoutIds.bottom, child: bottomColumn),
      ],
    );
  }
}

// 布局代理类，控制子元素的尺寸和位置
class _RowAlignmentDelegate extends MultiChildLayoutDelegate {
  static const _LayoutIds _ids = _LayoutIds();

  @override
  void performLayout(Size size) {
    // 1. 先布局中间列，获取其高度（以此作为Row的总高度）
    final centerConstraints = BoxConstraints.loose(size);
    final centerSize = layoutChild(_ids.center, centerConstraints);
    
    // 2. 设置中间列的位置：水平居中，垂直从顶部开始
    final centerX = (size.width - centerSize.width) / 2;
    positionChild(_ids.center, Offset(centerX, 0));

    // 3. 布局顶部列：宽度为左侧剩余空间，高度等于中间列高度，内容顶部对齐
    final leftWidth = centerX;
    layoutChild(
      _ids.top,
      BoxConstraints.tightFor(width: leftWidth, height: centerSize.height),
    );
    positionChild(_ids.top, Offset(0, 0));

    // 4. 布局底部列：宽度为右侧剩余空间，高度等于中间列高度，内容底部对齐
    final rightWidth = size.width - centerX - centerSize.width;
    final bottomChildSize = layoutChild(
      _ids.bottom,
      BoxConstraints.tightFor(width: rightWidth, height: centerSize.height),
    );
    // 垂直位置：总高度减去底部列自身高度，实现底部对齐
    final bottomY = centerSize.height - bottomChildSize.height;
    positionChild(_ids.bottom, Offset(centerX + centerSize.width, bottomY));
  }

  @override
  bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) => false;
}

// 布局ID标记
class _LayoutIds {
  const _LayoutIds();
  final top = 'top';
  final center = 'center';
  final bottom = 'bottom';
}

使用方式：

CustomAlignedRow(
  topColumn: Column(children: const [Text('顶部列'), Text('第二行')]),
  centerColumn: Column(children: const [
    Text('居中列行1'),
    Text('居中列行2'),
    Text('居中列行3'),
  ]),
  bottomColumn: Column(children: const [Text('底部列'), Text('多行底部')]),
)

说明：

• 该方法强制Row高度等于中间列的高度，其他列无论内容多长都不会改变Row高度
• 可以根据需求调整各列的宽度分配逻辑（比如固定宽度、比例分配等）

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