Flutter如何在Column中嵌入GridView并仅让GridView可滚动

报错原因说明 #

• 首次出现renderflex overflowed报错：Column布局会给未被弹性组件包裹的子组件分配无限制的纵向高度，GridView默认会尝试占满所有可用高度，父容器Column无法计算出GridView的准确尺寸，最终导致内容超出屏幕可视范围触发溢出。
• 包裹Expanded后仍出现滚动溢出：代码中保留了GridView的shrinkWrap: true、primary: true两个属性。shrinkWrap的作用是让GridView根据子元素总高度自适应尺寸，不需要也不应该和外层的Expanded（会给GridView固定的可用高度）同时使用；primary: true会让GridView复用父级的滚动控制器，干扰自身的独立滚动逻辑。

修复后的完整代码 #

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // 顶部固定头部代码保持不变
            Container(
              margin: EdgeInsets.only(left: 24, right: 24),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 22),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Message("Hello, Guest!", size: 32),
                      Icon(
                        CustomIcons.statistics,
                        color: AppColors.blue,
                        size: 32.0,
                      ),
                    ],
                  ),
                  SizedBox(height: 14),
                  Message("What worries you now? Select or Add.", size: 14),
                ],
              ),
            ),
            SizedBox(height: 16),
            // 调整GridView部分逻辑
            Expanded(
              child: GridView.count(
                crossAxisCount: 2,
                crossAxisSpacing: 40.0,
                mainAxisSpacing: 40.0,
                padding: const EdgeInsets.all(20.0),
                children: _items,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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