Flutter分页管理插件opinionated_pagination的使用

Flutter分页管理插件opinionated_pagination的使用

预览

状态

Dart

这是一个分页库,它:

  • 自动管理您的分页导航
  • 自动计算当前页面以及应显示哪些按钮
  • 非常轻量且通用
  • 支持所有Flutter平台
  • 可以与任何状态管理解决方案一起工作
  • 意见非常明确

开始使用

1. 安装包

pubspec.yaml 文件中添加以下依赖项:

dependencies:
  opinionated_pagination: ^x.x.x

然后运行以下命令来安装包:

flutter pub get

2. 使用

基本示例

以下是一个基本示例,使用 setState 进行状态管理:

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

int paginationPage = 0;
final int limit = 5;
final int itemCount = 120;

// 计算当前页面显示的起始和结束位置
final _pageGroupEnd = (paginationPage + 1) * limit;
final _pageGroupStart = _pageGroupEnd - (limit - 1);

Widget build(BuildContext context) {
  return OpinionatedPagination(
    pageNumber: paginationPage,
    totalItems: itemCount,
    skip: paginationPage,
    limit: limit,
    onPageChanged: (int? i) {
      // 当页面变化时更新状态
      if (i != null) {
        setState(() {
          paginationPage = i;
        });
      }
    },
  );
}

完整示例

以下是一个更完整的示例,可以在 example 页面找到更多详细信息。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Opinionated Pagination Demo',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int paginationPage = 0;
  final int limit = 5;
  final int itemCount = 120;

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 计算当前页面显示的起始和结束位置
    final _pageGroupEnd = (paginationPage + 1) * limit;
    final _pageGroupStart = _pageGroupEnd - (limit - 1);

    return Scaffold(
      appBar: AppBar(
        title: Text('Opinionated Pagination Example'),
      ),
      body: Container(
        padding: const EdgeInsets.only(top: 10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 显示当前显示的数据范围
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Showing $_pageGroupStart to ${_pageGroupEnd > itemCount ? itemCount : _pageGroupEnd} of $itemCount',
                ),
              ],
            ),
            // 分割线
            Divider(
              height: 22.0,
              thickness: 1.0,
              color: Colors.grey.shade300,
            ),
            // 分页组件
            OpinionatedPagination(
              pageNumber: paginationPage,
              totalItems: itemCount,
              skip: paginationPage,
              limit: limit,
              onPageChanged: (int? i) {
                // 当页面变化时更新状态
                if (i != null) {
                  setState(() {
                    paginationPage = i;
                  });
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter分页管理插件opinionated_pagination的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter分页管理插件opinionated_pagination的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter中使用opinionated_pagination插件进行分页管理的示例代码。opinionated_pagination插件简化了分页数据的获取和展示,使得分页逻辑更加清晰和高效。

首先,确保你已经在pubspec.yaml文件中添加了opinionated_pagination依赖:

dependencies:
  flutter:
    sdk: flutter
  opinionated_pagination: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码,展示了如何使用opinionated_pagination进行分页:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Pagination Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final PagingController<int, MyItem> _pagingController = PagingController(
    firstPageKey: 0,
    pagingDataSource: MyPagingDataSource(),
  );

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Pagination Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: RefreshIndicator(
          onRefresh: () async {
            await _pagingController.refresh();
          },
          child: PaginatedDataList<int, MyItem>(
            pagingController: _pagingController,
            builderDelegate: PaginatedDataBuilderDelegate<MyItem>(
              itemBuilder: (context, item, index) {
                return ListTile(
                  title: Text(item.title),
                  subtitle: Text(item.description),
                );
              },
              emptyBuilder: (context) {
                return Center(child: Text('No items found.'));
              },
              errorBuilder: (context, error, stackTrace) {
                return Center(child: Text('Error loading items.'));
              },
            ),
          ),
        ),
      ),
    );
  }
}

class MyItem {
  final int id;
  final String title;
  final String description;

  MyItem({required this.id, required this.title, required this.description});
}

class MyPagingDataSource extends PagingDataSource<int, MyItem> {
  MyPagingDataSource() : super();

  @override
  Future<PageInfo<MyItem>> fetchPage(int pageKey, {required bool refetch}) async {
    // 模拟从服务器获取数据
    await Future.delayed(Duration(seconds: 1));
    final items = List.generate(
      10, // 每页显示的项目数量
      (index) => MyItem(
        id: (pageKey * 10) + index,
        title: 'Item ${(pageKey * 10) + index}',
        description: 'Description for item ${(pageKey * 10) + index}',
      ),
    );
    return PageInfo<MyItem>(
      items: items,
      hasNextPage: true, // 假设还有更多页
      nextPageKey: pageKey + 1,
    );
  }
}

代码说明

  1. 依赖导入

    • 导入flutteropinionated_pagination包。
  2. 分页控制器

    • 创建一个PagingController<int, MyItem>实例,其中int是分页的键类型,MyItem是数据项的类型。
    • firstPageKey设置为初始分页键。
    • pagingDataSource设置为自定义的MyPagingDataSource实例。
  3. 数据项类

    • MyItem类定义了数据项的结构,包括idtitledescription
  4. 分页数据源

    • MyPagingDataSource类继承自PagingDataSource<int, MyItem>
    • fetchPage方法模拟从服务器获取数据,返回一个PageInfo<MyItem>对象,包含当前页的数据项、是否有下一页以及下一页的键。
  5. UI构建

    • MyHomePage是一个有状态的Widget,包含PagingController和UI构建逻辑。
    • 使用PaginatedDataList组件来展示分页数据。
    • builderDelegate定义了如何构建数据项、空数据和错误信息的UI。
  6. 刷新指示器

    • 使用RefreshIndicator组件支持下拉刷新功能。

这个示例展示了如何使用opinionated_pagination插件进行分页管理,包括数据的获取、展示和刷新。你可以根据实际需求对代码进行扩展和修改。

回到顶部