Flutter实现横向滚动容器统一高度为最大容器高度

要让横向滚动视图里的所有容器高度和最高子项保持一致，核心是利用IntrinsicHeight组件配合Row的交叉轴拉伸属性，具体修改如下：

修改思路 #

1. 使用IntrinsicHeight包裹Row，它会自动计算子项中的最大高度，让所有子项继承这个高度。
2. 给Row设置crossAxisAlignment: CrossAxisAlignment.stretch，强制所有子项填充IntrinsicHeight计算出的高度。
3. 移除原空约束的ConstrainedBox，改用更直接的布局层级实现子项间距。

修改后的完整代码 #

ScrollPage 组件 #

class ScrollPage extends StatelessWidget {
  const ScrollPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ScrollPage Page'),
      ),
      backgroundColor: Colors.grey,
      body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        CustomScrollView(
          cardList: [
            Card(
              child: Container(
                color: Colors.blue,
                height: 100,
                width: 50,
              ),
            ),
            Card(
              child: Container(
                color: Colors.yellow,
                // 可保留height属性，IntrinsicHeight会自动取最高值适配；也可直接移除
                // height: 50,
                width: 50,
              ),
            ),
          ],
        ),
      ]),
    );
  }
}

CustomScrollView 组件 #

@immutable
class CustomScrollView extends StatelessWidget {
  final List<Widget> cardList;
  final double marginSpacer = 16;

  const CustomScrollView({
    super.key,
    required this.cardList,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: marginSpacer),
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: List.generate(cardList.length, (index) {
              return Padding(
                padding: EdgeInsets.only(right: index == cardList.length -1 ? 0 : 8),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width * 0.83,
                  child: cardList.elementAt(index),
                ),
              );
            }),
          ),
        ),
      ),
    );
  }
}

关键说明 #

• IntrinsicHeight会遍历所有子项计算最大高度，确保所有子组件同步匹配该高度。
• CrossAxisAlignment.stretch让Row内的每个子项都填充IntrinsicHeight提供的高度空间。
• 用Padding替代原嵌套Row实现子项间距，简化布局层级。

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