Flutter页面中间展示4张卡片失败，出现布局无限尺寸错误求助

问题根源 #

• 原CardNote组件嵌套了Scaffold，而Scaffold默认会占据父容器全部可用空间，将两个这类组件放入Row时，水平方向无约束会触发无限尺寸布局错误。
• 调用逻辑错误，直接在Row中嵌套页面级组件不符合布局规则，且无法实现垂直居中与多行排列效果。

解决方案1：重构可复用卡片组件，通过Column+Row实现2行2列居中布局 #

首先将CardNote改为单卡片的可复用组件，移除不必要的Scaffold：

import 'package:flutter/material.dart';

class SingleCard extends StatelessWidget {
  final String title;
  const SingleCard({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 3,
      color: Colors.amber,
      child: SizedBox(
        width: 200,
        height: 200,
        child: Center(
          child: Text(title),
        ),
      ),
    );
  }
}

然后在主页面中用Center包裹Column，每行通过Row放置两个卡片，实现整体居中：

return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SingleCard(title: 'Card 1'),
            SingleCard(title: 'Card 2'),
          ],
        ),
        SizedBox(height: 50), // 两行卡片的垂直间距
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SingleCard(title: 'Card 3'),
            SingleCard(title: 'Card 4'),
          ],
        ),
      ],
    ),
  ),
);

解决方案2：使用GridView快速实现网格布局 #

若卡片数量可能变动，使用GridView.count更灵活，同样能实现居中效果：

return Scaffold(
  body: Center(
    child: SizedBox(
      width: MediaQuery.of(context).size.width,
      child: GridView.count(
        shrinkWrap: true, // 自适应内容高度，避免无限滚动问题
        crossAxisCount: 2, // 每行显示2个卡片
        mainAxisSpacing: 50, // 卡片垂直间距
        crossAxisSpacing: 20, // 卡片水平间距
        padding: const EdgeInsets.symmetric(horizontal: 20),
        children: const [
          SingleCard(title: 'Card 1'),
          SingleCard(title: 'Card 2'),
          SingleCard(title: 'Card 3'),
          SingleCard(title: 'Card 4'),
        ],
      ),
    ),
  ),
);

关键注意事项 #

• 不要在复用组件中嵌套Scaffold，它是页面根组件，仅在页面层级使用。
• 通过Center或Column的mainAxisAlignment: MainAxisAlignment.center确保内容垂直居中。
• 使用网格布局时，必须设置shrinkWrap: true避免无限高度布局错误。

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