Flutter 项目实战 实现分页加载图片的列表 十

在Flutter中实现带有图片分页加载的列表，可以使用ListView.builder结合CustomScrollView和SliverGrid来实现。以下是一个简化的例子：

import 'package:flutter/material.dart';
 
class PhotoListPage extends StatefulWidget {
  @override
  _PhotoListPageState createState() => _PhotoListPageState();
}
 
class _PhotoListPageState extends State<PhotoListPage> {
  final List<String> _photos = []; // 假设这是你的图片列表
  final ScrollController _scrollController = ScrollController();
  int _currentPage = 0; // 当前加载的页数
  bool _isLoading = false; // 是否正在加载
 
  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
    // 在这里初始化你的图片列表，比如从本地或远程服务器获取
  }
 
  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
 
  // 当滚动时触发的方法
  void _onScroll() {
    if (_isLoading) return;
    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      _fetchPhotos(); // 获取更多图片
    }
  }
 
  // 获取图片的方法
  void _fetchPhotos() {
    setState(() {
      _isLoading = true;
    });
    // 在这里添加异步获取图片的逻辑，比如发起网络请求
    // 获取成功后，更新_photos和_currentPage
 
    // 模拟数据获取
    Future.delayed(Duration(seconds: 2)).then((_) {
      setState(() {
        // 添加更多的图片URL到_photos列表
        _currentPage++;
        _isLoading = false;
      });
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图片列表'),
      ),
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
              childAspectRatio: 1.0,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                if (index < _photos.length) {
                  final String photo = _photos[index];
                  return GridTile(
                    child: Image.network(
                      photo,
                      fit: BoxFit.cover,
                    ),
                  );