ListView.bulider在颤振中的分页

Question

我是新来的颤栗，我一直在寻找好的结果在分页。

颤振列表视图中的分页是在到达列表末尾时加载数据的一种方法。分页用于部分加载数据。颤振列表视图中的分页以页的方式划分数据，如第1页和页。

需要在每个页面输入上加载数据10项的列表:实现分页

产出：

图片：

https://i.stack.imgur.com/QKHc2.png

Answer 1

您可以使用负载量包。

  body:  RefreshIndicator(
          child: LoadMore(
            isFinish: count >= 10,
            onLoadMore: _loadMore,
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  child: Text(list[index].toString()),
                  alignment: Alignment.center,
                );
              },
              itemCount: count,
            ),
            whenEmptyLoad: false,
            delegate: DefaultLoadMoreDelegate(),
            textBuilder: DefaultLoadMoreTextBuilder.chinese,
          ),
          onRefresh: _refresh,
        ),

Answer 2

您可以使用Flutter的NotificationListener<ScrollNotification>(...)小部件。

示例：

import 'package:flutter/material.dart';

class PaginatedListView extends StatefulWidget {
  const PaginatedListView({
    required this.onNext,
    this.nextPageRatio = 1,
    this.hasNextPage = false,
    required this.child,
    this.loadingIndicator,
    super.key,
  }) : assert(
          nextPageRatio >= 0 && nextPageRatio <= 1,
          '[nextPageRatio] should be between 0...1',
        );

  final VoidCallback onNext;
  final double nextPageRatio;
  final bool hasNextPage;
  final SliverList child;
  final Widget? loadingIndicator;

  @override
  State<PaginatedListView> createState() => _PaginatedListViewState();
}

class _PaginatedListViewState extends State<PaginatedListView> {
  final ScrollController _controller = ScrollController();

  double _currentMaxScrollExtent = 0;

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_controller.position.maxScrollExtent == 0 && widget.hasNextPage) {
        widget.onNext();
      }
    });
  }

  bool _onNotification(ScrollNotification notification) {
    if (!widget.hasNextPage) {
      return false;
    }

    final double maxScrollExtent =
        notification.metrics.maxScrollExtent * widget.nextPageRatio;

    if (notification.metrics.pixels >= maxScrollExtent &&
        _currentMaxScrollExtent < maxScrollExtent) {
      _currentMaxScrollExtent = maxScrollExtent;
      widget.onNext();
    }

    return false;
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: _onNotification,
      child: CustomScrollView(
        controller: _controller,
        physics: const AlwaysScrollableScrollPhysics(),
        slivers: <Widget>[
          widget.child,
          if (widget.hasNextPage)
            SliverToBoxAdapter(
              child: Center(
                child: widget.loadingIndicator ??
                    const CircularProgressIndicator(),
              ),
            ),
        ],
      ),
    );
  }
}

Answer 3

您可以使用拉到刷新包在颤振中分页。