Flutter 无限滚动分页页面侦听器会自动获取下一页，而不是在屏幕滚动时获取

Question

在此示例中，我尝试使用 pub.dev 中的Infinity_scroll_pagination 包来构建PagedGridView。我现在使用网格颜色，但应该发生的是生成前 9 个项目，当用户到达页面底部时，页面侦听器将请求更多图块（直到页面大小达到 color.length。但是， pagedgridview 会自动获取 pageSize 增量，而无需任何滚动行为，当它发现这样我就不会进行不必要的读取时，我需要它与我的数据库一起工作。

我设置的是一个列表视图，其子视图之一为 PagedGridView。我还用 RefreshIndicator 包装了主体，以尝试手动通知页面侦听器。无论哪种方式，gridview 都会自动按 pageSize (9) 增加项目数，而无需任何滚动行为。

import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';

class InfiniteScroll extends StatefulWidget {
  const InfiniteScroll({super.key});

  @override
  State<InfiniteScroll> createState() => _InfiniteScrollState();
}

class _InfiniteScrollState extends State<InfiniteScroll> {
  final List<Color> _colors = List.generate(
    100,
    (index) => Color(index * 0xFFFFFF ~/ 1000).withOpacity(0.5),
  );

  static const int _pageSize = 9;
  final PagingController<int, Color> _pagingController =
      PagingController(firstPageKey: 0);

  @override
  void initState() {
    _pagingController.addPageRequestListener(_fetchPage);
    super.initState();
  }

  Future<void> _fetchPage(int pageKey) async {
    try {
      if (pageKey > _colors.length) {
        _pagingController.appendLastPage([]);
        return;
      }
      final newItesm = await Future.wait(List.generate(_pageSize,
              (index) => Future.delayed(const Duration(milliseconds: 50))))
          .then((_) => _colors.skip(pageKey).take(_pageSize).toList());

      final isLastPage = newItesm.length < _pageSize;
      if (isLastPage) {
        _pagingController.appendLastPage(newItesm);
      } else {
        final nextPageKey = pageKey + newItesm.length;
        _pagingController.appendPage(newItesm, nextPageKey);
      }
    } catch (e) {
      _pagingController.error = e;
      debugPrint(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        onRefresh: () async => _pagingController.refresh(),
        child: ListView(
          children: [
            const Card(
              child: ListTile(
                title: Text("Infinite Scroll Pagination"),
                subtitle: Text("Infinite Scroll Pagination"),
                trailing: Icon(Icons.arrow_forward_ios),
              ),
            ),
            PagedGridView<int, Color>(
              pagingController: _pagingController,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 4.0,
                crossAxisSpacing: 4.0,
              ),
              builderDelegate: PagedChildBuilderDelegate<Color>(
                itemBuilder: (context, item, index) {
                  return Container(
                    color: item,
                    child: InkWell(
                      onTap: () {
                        debugPrint("Color: $item");
                      },
                      child: Center(
                        child: Text(
                          index.toString(),
                          style: const TextStyle(fontSize: 20),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

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

Answer 1

似乎

ListView

不是延迟加载。从

Card

中删除

Listview

并将

Listview

更改为

LayoutBuilder

对我有用。

    body: RefreshIndicator(
        onRefresh: () async => _pagingController.refresh(),
        child: LayoutBuilder(builder: (context, constraints) {
          return PagedGridView<int, Color>(
            pagingController: _pagingController,
            shrinkWrap: true,
            // physics: const NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),
            builderDelegate: PagedChildBuilderDelegate<Color>(
              itemBuilder: (context, item, index) {
                return Container(
                  color: item,
                  child: InkWell(
                    onTap: () {
                      debugPrint("Color: $item");
                    },
                    child: Center(
                      child: Text(
                        index.toString(),
                        style: const TextStyle(fontSize: 20),
                      ),
                    ),
                  ),
                );
              },
            ),
          );
        }),
      ),

这是我放置

Card

的位置。

      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(50), // here the desired height
        child: Card(
          child: ListTile(
            title: Text("Infinite Scroll Pagination"),
            subtitle: Text("Infinite Scroll Pagination"),
            trailing: Icon(Icons.arrow_forward_ios),
          ),
        ),
      ),