Flutter分页列表构建插件paginated_listview_builder的使用

Flutter分页列表构建插件paginated_listview_builder的使用

介绍

paginated_listview_builder 是一个可以帮助你实现分页功能的 Flutter 插件。它通过 ListView.builder 来实现分页效果。

作者

• uzixCode

截图

使用/示例

以下是一个完整的示例代码，展示了如何使用 paginated_listview_builder 插件来创建一个分页列表。

import 'dart:developer';

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:paginated_listview_builder/paginated_listview_builder.dart';

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final paginatedController = PaginatedController<int>();

  [@override](/user/override)
  void initState() {
    getNewData();
    super.initState();
  }

  final List<int> data = List.generate(10, (index) => index + 1);

  bool isLoading = false;
  bool isShowButton = false;

  void getNewData() async {
    isLoading = true;
    setState(() {});

    // 模拟加载数据
    await Future.delayed(const Duration(seconds: 1));

    // 添加新数据到控制器
    paginatedController.addData(data);

    isLoading = false;
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Gits Paginated ListView Builder'),
        ),
        floatingActionButton: isShowButton == false
            ? null
            : FloatingActionButton(
                onPressed: () {
                  // 滚动到顶部
                  paginatedController.scrollController.animateTo(
                    0,
                    duration: const Duration(seconds: 1),
                    curve: Curves.easeIn,
                  );
                },
                child: const Icon(Icons.keyboard_arrow_up),
              ),
        body: RefreshIndicator(
          onRefresh: () async {
            // 重置分页控制器并获取新数据
            paginatedController.reset();
            getNewData();
          },
          child: PaginatedListViewBuilder<int>(
            threshold: 80,
            controller: paginatedController,
            isLoading: isLoading,
            onHitThreshold: (context, current) {
              // 当滚动到阈值时触发
              if (isLoading == false) {
                log(current.toString());
                getNewData();
              }
            },
            onScrolling: (context, current, controller) {
              // 监听滚动状态
              if (controller.position.pixels > 50) {
                if (isShowButton == false) {
                  isShowButton = true;
                  setState(() {});
                }
              } else {
                if (isShowButton == true) {
                  isShowButton = false;
                  setState(() {});
                }
              }
              log(controller.position.pixels.toString());
            },
            itemBuilder: (context, index, currentData) => Padding(
              padding: const EdgeInsets.all(20),
              child: Container(
                color: Colors.orange,
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Text(index.toString()),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}