Flutter GridView动态增删子项触发SliverGeometry报错布局损坏

实现GridView内子项动态增删功能时，页面首次加载显示正常，点击子项内置关闭按钮移除对应项时，出现布局损坏、子项无法正常移除的问题，点击移除时直接抛出如下错误：

Error: SliverGeometry is not valid: The "maxPaintExtent" is less than the "paintExtent".

• 动态列表实现方式错误：直接维护List<Widget>存储子项实例做增删操作，会导致Flutter框架的三棵树（Widget树、Element树、RenderObject树）节点匹配逻辑失效，Sliver组件做布局计算时拿到的几何参数非法，触发校验报错
• 布局约束冲突：使用SliverGridDelegateWithFixedCrossAxisCount时，框架会给每个网格子项施加强制宽高约束（默认宽高比1:1的正方形约束），但原代码在子项中硬编码SizedBox(height: 100)，子项尺寸和网格单元约束不匹配，进一步导致布局计算数值异常
• 冗余布局嵌套：每个子项的根节点是仅包裹单个Stack的Column，无实际布局作用，反而会干扰约束的正常传递，增加布局异常概率

• 放弃直接维护Widget列表的做法，改为维护纯数据列表（本场景用唯一ID标识每个图片项即可），使用GridView.builder按需构建子项，这是Flutter官方推荐的动态列表实现方式，框架会自动处理子项增删时的状态跟踪、元素复用，从根源避免状态不匹配问题
• 移除子项内部硬编码的固定高度，统一通过SliverGridDelegateWithFixedCrossAxisCount的childAspectRatio参数控制网格项的宽高比例，让子项严格适配网格单元的约束，避免布局冲突
• 给每个子项绑定基于数据ID的ValueKey，保证框架能精准定位列表中变化的项，提升更新效率
• 清理无意义的布局嵌套，精简子项层级

import 'package:flutter/material.dart';
// 以下导入按你的项目实际保留即可
// import 'package:mindmatch/utils/widget_functions.dart';
// import 'package:mindmatch/custom/BorderIcon.dart';
// import 'package:mindmatch/screens/Relation.dart';
// import 'package:flutter_svg/flutter_svg.dart';

void main() {
  runApp(const MaterialApp(
    home: Photos(),
  ));
}

class Photos extends StatefulWidget {
  final dynamic usrid;
  const Photos({Key? key, this.usrid}) : super(key: key);

  @override
  State<Photos> createState() => _PhotosState();
}

class _PhotosState extends State<Photos> {
  // 仅维护子项的唯一ID，不直接存Widget实例
  final List<int> _photoIds = [];
  int _idCounter = 0;

  @override
  void initState() {
    super.initState();
    // 初始化4个默认项
    for(int i = 0; i < 4; i++){
      _photoIds.add(_idCounter);
      _idCounter++;
    }
  }

  // 新增子项
  void _addItem() {
    setState(() {
      _photoIds.add(_idCounter);
      _idCounter++;
    });
  }

  // 移除指定ID的子项
  void _removeItem(int targetId) {
    setState(() {
      _photoIds.remove(targetId);
    });
  }

  // 构建单个网格子项
  Widget _buildGridItem(int itemId) {
    return Stack(
      key: ValueKey(itemId),
      children: [
        Card(
          elevation: 0,
          shape: RoundedRectangleBorder(
            side: const BorderSide(
              color: Color(0xffa1a1a1),
            ),
            borderRadius: BorderRadius.circular(12),
          ),
          // 让Card占满整个网格单元，无需硬编码宽高
          child: const SizedBox.expand(
            child: Center(
              child: Icon(
                Icons.image,
                color: Color(0xffcccccc),
                size: 60,
              ),
            ),
          ),
        ),
        Positioned(
          top: 9,
          right: 9,
          child: InkWell(
            onTap: () => _removeItem(itemId),
            // 无SVG环境时可先用原生图标测试，后续替换回自己的资源即可
            child: const Icon(
              Icons.close,
              size: 20,
            ),
            // 使用SVG图标时放开以下注释
            // child: SvgPicture.asset(
            //   width: 20,
            //   'assets/images/close.svg',
            //   height: 20,
            // ),
          ),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Photos'),
        backgroundColor: Colors.deepPurpleAccent,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addItem,
        child: const Icon(Icons.add),
      ),
      body: Container(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          children: [
            Expanded(
              child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 10.0,
                  mainAxisSpacing: 15,
                  // 如需调整格子宽高比修改该值即可，值=宽度/高度，1.0为正方形
                  childAspectRatio: 1.0,
                ),
                itemCount: _photoIds.length,
                itemBuilder: (context, index) {
                  return _buildGridItem(_photoIds[index]);
                },
              )
            )
          ],
        ),
      ),
    );
  }
}

• 如果需要调整网格项高度，不要在子项内部写固定高度，修改childAspectRatio参数即可：比如想要每个格子高度100，计算好网格单元宽度和100的比值填入参数即可，保证子项和网格单元尺寸完全匹配
• 如果后续网格项要展示真实图片数据，只要把_photoIds改成对应的数据模型列表，存储图片地址、描述等真实业务字段即可，构建逻辑不变

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