Flutter分页显示插件number_pagination的使用

插件简介

number_pagination 是一个为Flutter应用提供可定制化分页功能的插件。它以直观和灵活的方式实现了分页，允许用户轻松地在多页内容中导航。

主要特性

• 页面数字按钮
• 导航控件（首页、上一页、下一页、末页）
• 可定制外观
• 响应式设计

安装

将以下内容添加到项目的 pubspec.yaml 文件中：

dependencies:
  number_pagination: ^1.1.0

使用示例

下面是一个完整的示例代码，展示了如何在Flutter项目中使用 number_pagination 插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NumberPagenation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Scaffold(body: MyHomePage()),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedPageNumber = 3;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Flexible(
          child: Container(
            alignment: Alignment.center,
            height: 100,
            color: Colors.yellow[200],
            child: Text('PAGE INFO $selectedPageNumber'), // 显示当前页信息
          ),
        ),
        NumberPagination(
          onPageChanged: (int pageNumber) {
            setState(() {
              selectedPageNumber = pageNumber;
            });
          },
          visiblePagesCount: 15, // 显示的页码数量
          totalPages: 100, // 总页数
          currentPage: selectedPageNumber, // 当前选中的页码
          buttonElevation: 5, // 按钮阴影
          buttonRadius: 5, // 按钮圆角半径
          controlButtonSize: Size(48, 48), // 控制按钮大小
          numberButtonSize: Size(48, 48), // 数字按钮大小
          selectedTextColor: Colors.white, // 选中文字颜色
          unSelectedTextColor: Colors.black, // 未选中文字颜色
          selectedButtonColor: Colors.black, // 选中按钮背景色
          unSelectedButtonColor: Colors.white, // 未选中按钮背景色
          controlButtonColor: Colors.white, // 控制按钮背景色
          firstPageIcon: Icon(Icons.first_page), // 首页图标
          previousPageIcon: Icon(Icons.keyboard_arrow_left), // 上一页图标
          nextPageIcon: Icon(Icons.keyboard_arrow_right), // 下一页图标
          lastPageIcon: Icon(Icons.last_page), // 末页图标
          navigationButtonSpacing: 4.0, // 导航按钮间距
          sectionSpacing: 10.0, // 导航按钮与数字按钮之间的间距
          betweenNumberButtonSpacing: 3, // 数字按钮之间的间距
        ),
      ],
    );
  }
}

自定义选项

NumberPagination 提供了丰富的自定义选项，以满足不同场景下的需求。以下是主要的自定义参数及其默认值：

Page Display

Text Styling

Button Styling

Colors

Icons

Spacing

Callback

通过这些自定义选项，您可以根据应用程序的需求调整 NumberPagination 的外观和行为，使其更好地融入您的应用设计中。