Flutter分页视图插件pageable_page_view的使用

pageable_page_view 是一个用于在 Flutter 应用程序中实现分页操作的插件。该插件提供了一种可定制且高效的分页方式，增强了用户体验，提供了流畅的滚动效果和灵活的选项。

特性

• list: 需要分页的数据列表。
• itemPerPage: 每页显示的项目数量。
• initialPage: 初始显示的页面索引。
• child: 包含另一个 Widget 的 Widget。
• shrinkWrap: 是否让 ListView 缩放其内容。
• scrollDirection: ListView 的滚动方向。
• physics: ListView 的物理属性。
• titleDisplay: 返回用于显示标题的文本的函数。
• subTitleDisplay: 返回用于显示副标题的文本的函数。
• prefixIcon: 领先图标。
• suffixIcon: 结尾图标。
• listTileOnTap: 当 ListTile 被点击时调用的函数。

开始使用

安装

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

dependencies:
  pageable_page_view: ^latest_version

导入

在 Dart 文件中导入 pageable_page_view：

import 'package:pageable_page_view/pageable_page_view.dart';

使用示例

下面是一个简单的示例，展示了如何使用 pageable_page_view 插件。

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

// 假设有一个 Pencil 类
class Pencil {
  final String color;
  final String size;

  Pencil(this.color, this.size);
}

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

class MyApp extends StatelessWidget {
  final List<dynamic> itemList = [
    Pencil('Red', 'M'),
    Pencil('Blue', 'M'),
    Pencil('Yellow', 'M'),
    Pencil('Orange', 'M'),
    Pencil('Black', 'M'),
    Pencil('White', 'M'),
    Pencil('White', 'L'),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Pageable Page View Example'),
        ),
        body: Column(
          children: [
            Expanded(
              child: PageablePageView(
                list: itemList,
                itemPerPage: 2,
                initialPage: 0,
                titleDisplay: (item) => item.color,
                subTitleDisplay: (item) => item.size,
                listTileOnTap: (index) {
                  print("Item at index $index was tapped.");
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

完整示例

以下是一个完整的示例，展示了如何使用 pageable_page_view 插件，并包含了一些额外的配置选项。

import 'package:flutter/material.dart';
import 'package:pageable_page_view/pageable_page_view.dart';
import 'package:pageable_pageview_example/pencil.dart'; // 假设有一个 Pencil 类

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pageable Page View Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Pageable Page View Demo'),
    );
  }
}

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> {
  final List<dynamic> itemList = [
    Pencil('Red', 'M'),
    Pencil('Blue', 'M'),
    Pencil('Yellow', 'M'),
    Pencil('Orange', 'M'),
    Pencil('Black', 'M'),
    Pencil('White', 'M'),
    Pencil('White', 'L'),
  ];

  void listOntp(int index) {
    print("Item at index $index was tapped.");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: PageablePageView(
        list: itemList,
        itemPerPage: 2,
        initialPage: 0,
        titleDisplay: (item) => item.color,
        subTitleDisplay: (item) => item.size,
        listTileOnTap: listOntp,
      ),
    );
  }
}