Flutter中SingleChildScrollView嵌套Row内多Column对齐问题

要实现三个Column分别顶部、底部、顶部对齐的效果，核心是让Row的高度由最高的Column（第一个含300项的Column）决定，再让其他Column在这个高度范围内完成对齐。可以通过IntrinsicHeight配合Align组件实现，具体修改如下：

import 'package:flutter/material.dart';

class DemoTest extends StatefulWidget {
  const DemoTest({super.key});

  @override
  State<DemoTest> createState() => _DemoTestState();
}

class _DemoTestState extends State<DemoTest> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: IntrinsicHeight( // 包裹Row，让Row高度匹配最高子元素的高度
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch, // 让子元素拉伸至Row的总高度
          children: [
            // 顶部对齐的Column，直接使用默认布局即可
            Column(
              children: List.generate(300, (index) {
                return Text(index.toString());
              }),
            ),
            // 底部对齐的Column，用Align包裹并设置底部对齐
            Align(
              alignment: Alignment.bottomCenter,
              child: Column(
                children: List.generate(100, (index) {
                  return Text(index.toString());
                }),
              ),
            ),
            // 再次顶部对齐的Column，直接使用默认布局即可
            Column(
              children: List.generate(100, (index) {
                return Text(index.toString());
              }),
            )
          ],
        ),
      ),
    );
  }
}

原理说明 #

• IntrinsicHeight：强制Row的高度自适应其内部最高子元素的高度，确保所有Column都处于相同高度的布局空间内。
• CrossAxisAlignment.stretch：让Row的每个子元素都拉伸至Row的总高度，为Align组件提供足够的空间来调整子Column的位置。
• Align：对第二个Column设置Alignment.bottomCenter，使其在Row的完整高度范围内底部对齐；第一个和第三个Column默认顶部对齐，无需额外设置即可满足需求。

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