Flutter分页功能插件cyrus_pagination的使用

Flutter分页功能插件cyrus_pagination的使用

这是一个由Um Kithya创建的库，用于轻松显示分页数据。

Cyrus Pagination 在构建活动流、新闻流或任何需要懒加载和渲染内容的地方非常有用。

示例

列表分页	网格分页

列表分页的使用

一个基本实现需要四个参数：

• onRefresh: 当下拉刷新时调用的刷新函数，类似于刷新指示器。
• widget: 显示项的小部件。
• fetchData: 获取数据的函数。
• itemList: 项目列表。
• loading: 加载状态变量。
• page: 页码状态变量。
• hasMoreData: 当有更多数据时为true。
• end: 当页等于总页数时为true。

简单示例

CyrusPagination<PassagerModel>(
  onRefresh: () async {
    setState(() {
      page = 1;
      end = false;
    });
    await fetchApi();
  },
  loading: loading,
  itemList: passagerList,
  page: page,
  end: end,
  fetchData: () => fetchApi(),
  widget: (data, index) => Padding(
    padding: const EdgeInsets.only(bottom: 10),
    child: CustomCard(
      description: data.name,
      title: "$index",
    ),
  ),
  hasMoreData: isMoreData,
),

网格分页的使用

CyrusPagination<PassagerModel>(
  isGridView: true,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisSpacing: 1,
    mainAxisSpacing: 10,
    crossAxisCount: 2,
    childAspectRatio: 3 / 4.5,
  ),
  onRefresh: () async {
    setState(() {
      page = 1;
      end = false;
    });
    await fetchApi();
  },
  loading: loading,
  itemList: passagerList,
  page: page,
  end: end,
  fetchData: () => fetchApi(),
  widget: (data, index) => Padding(
    padding: const EdgeInsets.only(bottom: 10),
    child: CustomCard(
      description: data.name,
      title: "$index",
    ),
  ),
  hasMoreData: isMoreData,
),

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用cyrus_pagination插件。

import 'package:cyrus_pagination/cyrus_pagination.dart';
import 'package:cyrus_pagination_example/model/passager_model.dart';
import 'package:dio_base_helper/dio_base_helper.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Cyrus Pagination'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var passagerList = <PassagerModel>[];
  var loading = false;
  var page = 1;
  var end = false;
  var isMoreData = false;

  Future<void> fetchApi() async {
    setState(() {
      if (page == 1) {
        passagerList.clear();
        isMoreData = false;
        loading = true;
      } else {
        isMoreData = true;
        loading = false;
      }
    });
    final dioBaseHelper = DioBaseHelper("https://api.instantwebtools.net/v1");
    await dioBaseHelper
        .onRequest(
            methode: METHODE.get, 
            endPoint: "/passenger?page=$page&size=10")
        .then((response) => {
              debugPrint("Status code 200====${response['data']}"),
              for (var json in response['data'])
                {
                  passagerList.add(
                    PassagerModel.fromJson(json),
                  )
                },
              debugPrint('Length===${passagerList.length}'),
              setState(() =>
                {
                  passagerList = passagerList,
                  if (page < response["totalPages"]) page++,
                  loading = false,
                  isMoreData = false,
                  end = page == response["totalPages"],
                })
            })
        .onError(
          (ErrorModel error, stackTrace) => {
            debugPrint('Error: ${error.statusCode}'),
            setState(
              () => {loading = false},
            )
          },
        );
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CyrusPagination<PassagerModel>(
        isGridView: true,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisSpacing: 1,
          mainAxisSpacing: 10,
          crossAxisCount: 2,
          childAspectRatio: 3 / 4.5,
        ),
        onRefresh: () async {
          setState(() {
            page = 1;
            end = false;
          });
          await fetchApi();
        },
        loading: loading,
        itemList: passagerList,
        page: page,
        end: end,
        fetchData: () => fetchApi(),
        widget: (data, index) => Padding(
          padding: const EdgeInsets.only(bottom: 10),
          child: CustomCard(
            description: data.name,
            title: "$index",
          ),
        ),
        hasMoreData: isMoreData,
      ),
    );
  }
}

class CustomCard extends StatelessWidget {
  const CustomCard({
    Key? key,
    this.description,
    this.title,
  }) : super(key: key);
  final String? title;
  final String? description;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Container(
        color: Colors.grey[300],
        height: 100,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              title!,
              style: const TextStyle(fontSize: 16),
            ),
            Text(
              description!,
              style: const TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}