Flutter 避免在颤振中滚动SliverGrid时重建子对象

您好，我正在使用CustomScrollView中的以下代码，使用SliverGrid和SliverChildBuilderDelegate在网格中显示图像。当滚动速度非常快时，已经缓存了图像的子窗口小部件在离开屏幕时会被破坏，而在屏幕上时会被重建。如何避免它们在卷轴上被破坏和重建

    SliverGrid(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 150,
              childAspectRatio: 1 / 1,
              crossAxisSpacing: 4.0,
              mainAxisSpacing: 4.0,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ClipRRect(
                    borderRadius: BorderRadius.circular(5.0),
                    child: Container(
                      alignment: Alignment.bottomRight,
                      padding: EdgeInsets.all(10.0),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          fit: BoxFit.fill,
                          image: CachedNetworkImageProvider(
                            "https://source.unsplash.com/${150}/${150 + index}/",
                          ),
                        ),
                      ),
                      child: index == (index / 2) + 1
                          ? Icon(
                              Icons.burst_mode,
                              color: AppTheme.fullWhite,
                            )
                          : index == (index / 6)
                              ? Icon(
                                  Icons.play_circle_filled,
                                  color: AppTheme.fullWhite,
                                )
                              : Container(),
                    ));
              },
              childCount: childCount,
            ),
          )

注意：如果我删除了图像url中的索引，那么在快速滚动时，它会加载得非常快，因为它显示的是相同的图像

${150}/${150+索引}/

---

我不知道你是否找到了答案，但这两个选项对我很有用： cacheExtent，包络处理为false。您可以或多或少地设置缓存范围。我敢肯定，如果它太多，它会消耗太多内存，因为列表生成器会在创建和销毁时为您管理内存

CustomScrollView(
    cacheExtent: 3500,
    shrinkWrap: false,
    controller: _scrollController,
    slivers: <Widget>[
      SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 1.5,
          crossAxisSpacing: 1.5,
          childAspectRatio: 0.7,
        ),

CustomScrollView(
缓存范围：3500，
收缩膜：假，
控制器：\ u滚动控制器，
条子：[
银栅(
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：3，
主轴间距：1.5，
交叉轴间距：1.5，
childAspectRatio:0.7，
),

使用包装类概念。这是一个冗长的解决方案。但您可以根据需要进行自定义，使其更短

    Widget decorationImage() {
        return DecorationImage(
            fit: BoxFit.fill,
            image: CachedNetworkImageProvider(
            "https://source.unsplash.com/${150}/${150 + index}/",
            );
    }

包装类：

class CustomSliverGrid extends StatelessWidget {
  Widget _widget;
  CustomSliverGrid(this._widget);

  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 150,
        childAspectRatio: 1 / 1,
        crossAxisSpacing: 4.0,
        mainAxisSpacing: 4.0,
      ),
      delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
          return ClipRRect(
              borderRadius: BorderRadius.circular(5.0),
              child: Container(
                alignment: Alignment.bottomRight,
                padding: EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                  image: _widget,
                ),
                child: index == (index / 2) + 1
                    ? Icon(
                  Icons.burst_mode,
                  color: AppTheme.fullWhite,
                )
                    : index == (index / 6)
                    ? Icon(
                  Icons.play_circle_filled,
                  color: AppTheme.fullWhite,
                )
                    : Container(),
              ));
        },
        childCount: childCount,
      ),
    );
  } 
}

在代码中使用该类作为：

class YourWidgetPlace extends StatelessWidget {

    Widget decorationImage() {
      return DecorationImage(
          fit: BoxFit.fill,
          image: CachedNetworkImageProvider(
          "https://source.unsplash.com/${150}/${150 + index}/",
      );
    } 
    
    @override
    Widget build(BuildContext context) {
      return CustomSliverGrid(decorationImage());
    }
}