Flutter GridView新增元素底部被截断，手动设高度不通用如何解决？

问题原因 #

你遇到的GridView底部内容截断问题，是两个硬编码问题导致的：

• Day2模块下，包裹GridView的外层Container写死了height:350、width:470的固定尺寸
• Day2模块下Stack第一层的渐变背景Container也写死了height:340的固定值

即使GridView设置了shrinkWrap: true可以自适应内部元素总高度，但被外层固定高度的容器强制限制了显示范围，新增元素后高度不够自然就会被截断，手动改固定高度的方案自然不通用。

修复方案 #

1. 删掉所有不必要的硬编码尺寸
   • 删除Day2模块中Stack第一层渐变Container的width、height属性
   • 删除Day2模块中包裹GridView的Container的width、height属性
2. 给Stack第一层的渐变Container增加fit: StackFit.expand属性，让渐变背景自动适配整个Stack的尺寸，不用手动指定大小
3. 修复代码中Day2对应Text组件的语法错误：把textAlign: *TextAlign.center,多余的*号删掉，改为textAlign: TextAlign.center

修改后的核心代码示例 #

// 修复后的Day2模块代码
Container(width: 100, height: 20,child: const Text("Day 2",textAlign: TextAlign.center,)),
Stack(
  children:[
    // 删掉固定宽高，加fit: StackFit.expand
    Container(
      margin: const EdgeInsets.all(4),
      fit: StackFit.expand,
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.pink,Colors.red,Colors.indigoAccent],
          begin: Alignment.topLeft,
          end: Alignment.bottomLeft,
        ),
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),),
    // 删掉固定宽高
    Container(
      margin: const EdgeInsets.all(6),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10,10,10,10),
        child: GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemCount: 4, // 后续新增元素也不用改外层高度
          itemBuilder: (_, int index) {
            return info("text", Colors.indigoAccent);
          },
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200,
            childAspectRatio: 2.1 / 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
          ),
        ),
      ),
    ),
  ]
),

修复后GridView会根据内部元素数量自动计算总高度，外层渐变背景也会自动适配高度，新增元素也不会再出现截断问题。

内容的提问来源于stack exchange，提问作者Mostafa Saad Salih