Flutter页面切换插件Pager的使用

Pager简介

Pager 是一个适用于多种场景的数字分页组件，例如自定义分页表格等。它可以帮助开发者轻松实现页面切换功能。

开始使用

添加依赖

首先，在你的 pubspec.yaml 文件中添加 pager 作为依赖：

dependencies:
  pager: ^0.0.6

然后运行 flutter pub get 来安装这个包。

导入包

在需要使用的 Dart 文件顶部导入 pager 包：

import 'package:pager/pager.dart';

使用方法

基本用法

Pager 是一个简单的分页组件，你可以通过以下方式创建并使用它：

Pager(
  currentPage: _currentPage,
  totalPages: 5,
  onPageChanged: (page) {},
),

这里我们指定了当前页码 _currentPage 和总页数 totalPages，并且当页面改变时会触发 onPageChanged 回调函数。

示例代码

下面是一个完整的例子，展示了如何在Flutter应用中使用 Pager 组件。

示例1：简单分页示例

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

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

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  int _currentPage = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Pagination Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 200,
              margin: const EdgeInsets.all(32),
              color: Colors.blue,
              child: Center(
                child: Text(
                  "PAGE: $_currentPage",
                  style: const TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
            Pager(
              currentPage: _currentPage,
              totalPages: 5,
              onPageChanged: (page) {
                setState(() {
                  _currentPage = page;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

示例2：带有每页显示条目数量选择器的分页示例

此示例展示了更复杂的用法，包括了每页显示条目的选择器。

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

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

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  late int _currentPage;
  late int _itemsPerPage;
  List<int> pages = [5, 10, 18, 50, 100];
  late int _totalPages;
  final int _totalElements = 100;

  @override
  void initState() {
    super.initState();
    _currentPage = 1;
    _itemsPerPage = pages.first;
    _totalPages = (_totalElements / _itemsPerPage).ceil();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Pagination Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                height: 180,
                width: 400,
                color: Colors.blue,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      "TOTAL ELEMENTS: $_totalElements",
                      style: const TextStyle(color: Colors.white, fontSize: 18),
                    ),
                    Text(
                      "CURRENT PAGE: $_currentPage",
                      style: const TextStyle(color: Colors.white, fontSize: 18),
                    ),
                    Text(
                      "ITEMS PER PAGE: $_itemsPerPage",
                      style: const TextStyle(color: Colors.white, fontSize: 18),
                    ),
                    Text(
                      "TOTAL PAGES: $_totalPages",
                      style: const TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 32),
              Pager(
                currentItemsPerPage: _itemsPerPage,
                currentPage: _currentPage,
                totalPages: _totalPages,
                onPageChanged: (page) {
                  setState(() {
                    _currentPage = page;
                  });
                },
                showItemsPerPage: true,
                onItemsPerPageChanged: (itemsPerPage) {
                  setState(() {
                    _itemsPerPage = itemsPerPage;
                    _totalPages = (_totalElements / _itemsPerPage).ceil();
                    _currentPage = 1;
                  });
                },
                itemsPerPageList: pages,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上就是关于 Pager 插件的基本介绍和使用方法，希望对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。