首页 > 解决方案 > 带有缓存网络图像的 SliverPersistentHeader 会导致每次滚动页面时重新加载图像

问题描述

我正在尝试使用网络图像实现 SliverPersistentHeader。我有一个扩展 SliverPersistentHeaderDelegate 的 _PageHeader 类。现在的问题是,每当我尝试滚动页面时,图像都会不断重新加载。是否可以只构建一次小部件?谢谢。

GIF图片 链接在这里

const _maxHeaderExtent = 350.0;
const _minHeaderExtent = 100.0;

class _PageHeader extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {

    return OptimizedCacheImage(
      imageUrl: 'https://i.pinimg.com/474x/69/77/b7/6977b70a129ec184527433bbdf9fe457.jpg',
      imageBuilder: (context, imageProvider) => Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: imageProvider,
            fit: BoxFit.fill,
          ),
        ),
      ),
      placeholder: (context, url) => Center(
        child: Container(
          height: 20,
          width: 20,
          child: CircularProgressIndicatorWidget(),
        ),
      ),
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  }

  @override
  double get maxExtent => _maxHeaderExtent;

  @override
  double get minExtent => _minHeaderExtent;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
      false;
}

标签: flutter

解决方案


推荐阅读