如何优化Flutter中含大量可展开项的动态网格布局性能？

我正在开发一款Flutter应用，其中包含一个根据屏幕尺寸动态调整列数的网格组件，网格内的元素支持展开（运行时可改变尺寸）。目前已实现预期布局，但当元素数量较多时，布局会变得卡顿、无响应。

预期布局示意图：

当前布局实现代码：

LayoutBuilder(
  builder: (context, constraints) {
    // 根据宽度确定列数
    int crossAxisCount = AppDimensions.getCrossAxisCount(constraints.maxWidth);
    double itemWidth = (constraints.maxWidth - (crossAxisCount - 1) * 10) / crossAxisCount;
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      children: provider.polizzenList.map((polizze) {
        return Container(
          width: itemWidth,
          child: PolizzenCard(
            polizze: polizze
          ),
        );
      }).toList(),
    );
  },
),

性能优化方案 #

1. 替换为懒加载的GridView.builder #

Wrap会一次性渲染所有子组件，元素数量较多时会触发大量同步布局与绘制操作，导致卡顿。GridView.builder采用懒加载机制，仅渲染视口内及预加载区域的元素，能显著降低渲染开销。

示例代码：

LayoutBuilder(
  builder: (context, constraints) {
    int crossAxisCount = AppDimensions.getCrossAxisCount(constraints.maxWidth);
    
    return GridView.builder(
      padding: EdgeInsets.zero,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: crossAxisCount,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        // 替换为PolizzenCard的默认宽高比，或根据展开状态动态调整
        childAspectRatio: 1.0, 
      ),
      itemCount: provider.polizzenList.length,
      itemBuilder: (context, index) => PolizzenCard(polizze: provider.polizzenList[index]),
    );
  },
),

2. 优化PolizzenCard组件 #

• 优先使用StatelessWidget，若需状态管理则用StatefulWidget并合理拆分状态，避免不必要的重建。
• 将build方法中的静态资源（如TextStyle、BoxDecoration）提取为类级常量，避免每次build重复创建。
• 若包含图片，使用缓存库（如cached_network_image）缓存图片，并根据卡片尺寸裁剪图片，减少内存占用与加载耗时。

3. 减少不必要的布局重建 #

• 缓存AppDimensions.getCrossAxisCount的计算结果，仅在屏幕尺寸变化时重新计算，避免每次build重复执行。
• 为PolizzenCard设置稳定的Key，确保Flutter能正确复用组件，避免无意义的重建。
• 确保provider.polizzenList的更新逻辑合理，仅在列表数据实际变化时触发通知，避免频繁刷新UI。

4. 定位精准瓶颈 #

使用Flutter DevTools的Performance面板分析：

• 查看布局、绘制阶段的耗时占比，定位耗时最长的操作。
• 检查组件重建频率，确认是否存在不必要的重复重建。

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