Question

嗨，我正在 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,
            ),
          )

注意：如果我删除了图像网址中的索引，则由于它显示了相同的图像，因此在快速滚动时它会很快加载。

https://source.unsplash.com/ $ {150} / $ {150 + index} /

Answer 1

我不知道您是否找到答案，但是以下两个选项对我有用： cacheExtent，shrinkWrap为false。您可以或多或少地使cacheExtent。我确定它是否过多，因为列表生成器在构建和销毁时会为您管理内存，因此会消耗太多内存。

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

Answer 2

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

    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());
    }
}

避免在SliverGrid中颤动滚动时重建孩子

2 个答案: