Flutter无限滚动列表图片预加载实现方案求助

针对滚动速度快于图片加载导致的空白占位问题，可以通过以下几种方案实现图片预加载：

1. 数据获取后立即后台预加载 #

在获取到新的列表数据后，直接调用预加载方法把图片缓存到本地，这样滚动到对应项时图片已就绪。

修改你的fetchData方法：

void fetchData() async {
  setState(() {
    _isLoading = true;
  });

  const headers = {
    'x-api-key': 'SECRET',
  };

  final Uri catApiUri = Uri.parse('https://api.thecatapi.com/v1/images/search?limit=10&page=1');
  final response = await http.get(catApiUri, headers: headers);
  
  if (response.statusCode != 200) {
    print('Failed to fetch data from the API with status code: ${response.statusCode}');
    setState(() => _isLoading = false);
    return;
  }

  List<PostSummary> parsedResponse = (jsonDecode(response.body) as List)
      .map((data) => PostSummary.fromJson(data))
      .toList();

  // 后台预加载新获取的图片
  for (var post in parsedResponse) {
    await precacheImage(
      CachedNetworkImageProvider(post.imageUrl),
      context,
    );
  }

  if (!mounted) return;

  setState(() {
    _isLoading = false;
    _items = [..._items, ...parsedResponse];
    print(_items.length);
  });
}

2. 监听滚动，预加载即将进入视图的图片 #

通过滚动控制器监听列表位置，提前加载即将出现在屏幕内的图片，避免一次性加载过多占用内存。

首先在FeedState中添加滚动控制器：

class FeedState extends State<Feed> {
  List<PostSummary> _items = [];
  var _isLoading = false;
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(_onScroll);
    fetchData();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  // 滚动时触发预加载逻辑
  void _onScroll() {
    final viewportHeight = MediaQuery.of(context).size.height;
    // 计算当前可见区域后3个位置的索引，提前预加载
    final preloadStartIndex = (_scrollController.position.pixels / viewportHeight).floor() + 2;
    final preloadEndIndex = preloadStartIndex + 3;

    for (int i = preloadStartIndex; i < _items.length && i < preloadEndIndex; i++) {
      precacheImage(
        CachedNetworkImageProvider(_items[i].imageUrl),
        context,
      );
    }
  }

  // ... 其他代码不变
}

然后给InfiniteList绑定控制器：

return InfiniteList(
  controller: _scrollController, // 添加控制器绑定
  itemCount: _items.length,
  isLoading: _isLoading,
  onFetchData: fetchData,
  separatorBuilder: (context, index) => const SizedBox(height:20.0),
  // ... 其他代码不变
);

3. 优化图片加载参数 #

利用图片API的裁剪能力，请求适配控件尺寸的图片，减小文件体积加快加载速度（TheCatAPI支持通过URL参数指定尺寸）：

CachedNetworkImage(
  imageUrl: '${_items[index].imageUrl}?width=300&height=300', // 直接请求指定尺寸的图片
  fit: BoxFit.cover,
  width: double.infinity,
  height: 300.0,
  // 添加占位符优化体验
  placeholder: (context, url) => Container(
    width: double.infinity,
    height: 300.0,
    decoration: BoxDecoration(
      color: Colors.grey[200],
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: const Center(child: CircularProgressIndicator()),
  ),
  errorWidget: (context, url, error) => const Icon(Icons.error),
);

额外建议 #

• 确保CachedNetworkImage的缓存策略合理，默认已开启磁盘缓存，可根据需求调整缓存大小
• 避免一次性预加载过多图片，防止内存占用过高

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