我来帮你排查这个问题～这个错误本质是组件没有得到明确的尺寸约束，导致带阴影/圆角的Card组件（底层用RenderPhysicalModel渲染）无法确定自己的边界，从而报出无限尺寸的异常。结合你的代码，我梳理了几个核心原因和对应的修复方案：

一、最可能的元凶：Expanded与无约束父容器的冲突 #

看你的代码结构，_buildProductsGrid、_buildSkeletonGrid都用了Expanded包裹GridView，如果你的页面主体是类似下面的结构，就会出问题：

// 错误示例：SingleChildScrollView包裹Column+Expanded
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        children: [
          _buildSortHeader(),
          _buildProductsGrid(), // Expanded在这里完全失效
        ],
      ),
    ),
  );
}

SingleChildScrollView会给子组件提供无限高度的约束，Expanded在这种环境下无法计算剩余空间，导致里面的GridView也会无限扩展，最终触发RenderPhysicalModel的错误。

修复方案：

直接把Column放在Scaffold的body里（Scaffold的body自带明确的屏幕尺寸约束）：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text("Popular Products")),
    body: Column(
      children: [
        _buildSortHeader(),
        // 根据状态切换不同组件
        if (isLoading)
          _buildSkeletonGrid()
        else if (errorMessage != null)
          Expanded(
            child: Center(child: Text(errorMessage!)),
          )
        else
          _buildProductsGrid(),
      ],
    ),
  );
}

二、Stack嵌套可滚动组件的约束问题 #

你的_buildProductsGrid用了Stack来叠加加载更多的骨架屏，但Stack的子组件默认会尽可能占满父容器的空间，容易和GridView的滚动约束冲突。

修复方案：替换Stack为更安全的布局方式

推荐直接在GridView中插入加载更多的骨架屏，不需要额外的Stack/Column：

Widget _buildProductsGrid() {
  if (products.isEmpty) {
    return const Expanded(
      child: Center(
        child: Padding(
          padding: EdgeInsets.all(32.0),
          child: Text(
            "No products available",
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
          ),
        ),
      ),
    );
  }

  return Expanded(
    child: GridView.builder(
      controller: _scrollController,
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 16.0,
        mainAxisSpacing: 16.0,
        childAspectRatio: 0.69,
      ),
      // 总数量=商品数+加载更多的骨架屏数量
      itemCount: products.length + (isLoadingMore ? 2 : 0),
      itemBuilder: (context, index) {
        // 超过商品数量的位置渲染骨架屏
        if (index >= products.length) {
          return const VerticalProductCardSkeleton();
        }
        final product = products[index];
        return VerticalProductCard(
          image: product.imageUrl,
          title: product.title,
          price: product.price,
          discountedPrice: product.discountedPrice,
          discountPercent: product.discountPercent,
        );
      },
    ),
  );
}

这种方式完全避免了多组件嵌套的约束冲突，代码也更简洁。

三、骨架屏组件的约束优化 #

你的_buildLoadMoreSkeleton虽然用了shrinkWrap: true，但如果保留原来的Stack方案，建议给骨架屏加一个明确的高度约束，比如用SizedBox包裹：

Widget _buildLoadMoreSkeleton() {
  return SizedBox(
    height: 200, // 根据你的骨架屏高度调整
    child: GridView.builder(
      physics: const NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      padding: const EdgeInsets.all(16.0),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 16.0,
        mainAxisSpacing: 16.0,
        childAspectRatio: 0.69,
      ),
      itemCount: 2,
      itemBuilder: (context, index) => const VerticalProductCardSkeleton(),
    ),
  );
}

额外的小提醒 #

1. 永远不要在SingleChildScrollView中嵌套Expanded+可滚动组件，这是布局约束冲突的重灾区；
2. 无限滚动的加载更多逻辑，优先用itemCount扩展+条件渲染的方式，比叠加组件更稳定；
3. 可以在initState中给_scrollController加一个防重复触发的判断，比如用Future.delayed或者防抖工具类，避免快速滚动时多次调用_loadMoreProducts。

按照上面的方案调整后，应该就能解决这个RenderPhysicalModel的无限尺寸错误啦～