Flutter分页显示插件number_pagination_flutter的使用

Flutter分页显示插件number_pagination_flutter的使用

number_pagination_flutter文档 1.0.0

组件库文档模版

版本更新说明

version 1.0.1 2024/6/26

样式

样式展示

目录结构

一级目录 子目录 说明
lib 组件库源码
number_pagination_flutter 基础框架源码目录
files 基础框架工具类目录
test 单元测试用例目录

导入方法

在需要引用本组件库的Flutter工程中的pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
	...
	number_pagination_flutter: ^1.0.1
	...

使用方法

具体的细节参数，都行写了英文备注，可以进去看。

示例代码如下：

NumberPaginationFlutter(
  onPageChanged: (int pageNumber) {
    // 当前页面改变时触发回调函数
    controller.page.value = pageNumber;
  },
  threshold: 10, // 滑动到当前页面之前多少个页面开始加载数据
  pageTotal: size, // 总页数
  pageInit: currentPage, // 初始化页面
  colorPrimary: Colors.blue, // 主色调
  colorBackGround: Colors.white, // 背景颜色
)

完整示例代码

以下是一个完整的示例代码，展示如何使用 number_pagination_flutter 插件实现分页功能：

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

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

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

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

class _MyAppState extends State<MyApp> {
  int currentPage = 1; // 当前页码
  int size = 100; // 总页数
  final controller = ValueNotifier<int>(1); // 控制器

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('number_pagination_flutter 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              NumberPaginationFlutter(
                onPageChanged: (int pageNumber) {
                  // 页面切换时更新当前页码
                  controller.value = pageNumber;
                },
                threshold: 10, // 滑动到当前页面之前10个页面开始加载数据
                pageTotal: size, // 总页数
                pageInit: currentPage, // 初始化页码
                colorPrimary: Colors.blue, // 主色调
                colorBackGround: Colors.white, // 背景颜色
              ),
              SizedBox(height: 20),
              Text(
                '当前页码: ${controller.value}', // 显示当前页码
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


number_pagination_flutter 是一个用于在 Flutter 应用中实现分页显示的插件。它提供了一个简单易用的分页组件，允许用户通过点击页码来切换不同的页面。以下是使用 number_pagination_flutter 的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 number_pagination_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  number_pagination_flutter: ^1.0.0  # 请检查最新版本

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

2. 导入包

在需要使用分页组件的 Dart 文件中导入 number_pagination_flutter 包：

import 'package:number_pagination_flutter/number_pagination_flutter.dart';

3. 使用 NumberPagination 组件

在 build 方法中使用 NumberPagination 组件。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PaginationExample(),
    );
  }
}

class PaginationExample extends StatefulWidget {
  [@override](/user/override)
  _PaginationExampleState createState() => _PaginationExampleState();
}

class _PaginationExampleState extends State<PaginationExample> {
  int _currentPage = 1;
  final int _totalPages = 10;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Number Pagination Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text('Current Page: $_currentPage'),
            ),
          ),
          NumberPagination(
            currentPage: _currentPage,
            totalPages: _totalPages,
            onPageChange: (int page) {
              setState(() {
                _currentPage = page;
              });
            },
          ),
        ],
      ),
    );
  }
}
回到顶部