Flutter分页加载插件flutter_pagewise的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter分页加载插件flutter_pagewise的使用

flutter_pagewise是一个用于Flutter应用程序中实现懒加载和分页功能的库。它允许组件以一页(或一批)为单位加载内容,从而提高应用性能并提供更好的用户体验。

主要特性

  • 按页加载数据:支持一次只加载一部分数据,减少初始加载时间。
  • 失败重试:当页面加载失败时,可以重新尝试加载。
  • 自定义加载、错误提示等UI:能够覆盖默认的加载指示器、重试按钮及错误信息显示样式。
  • 通过PagewiseLoadController管理加载逻辑:提供了对加载过程更精细的控制。
  • 多种布局方式的支持:包括ListViewGridView以及它们对应的Sliver版本。

重要变更(从V1.0.0开始)

在版本1.0.0之后,该库进行了重构,不再需要指定totalCount参数,并且优化了滚动到底部时的加载体验,仅展示一个加载标识。此外,在itemBuilder回调函数中新增了一个索引参数供开发者使用。

安装方法

要在项目中使用此插件,首先需要在pubspec.yaml文件中的依赖项部分添加如下配置:

dependencies:
    flutter_pagewise: ^latest_version # 替换为最新版本号

然后,在想要使用的Dart文件顶部导入相应的包:

import 'package:flutter_pagewise/flutter_pagewise.dart';

使用示例

以下是几种常见场景下的用法示例:

PagewiseGridView 示例

PagewiseGridView.count(
  pageSize: 10,
  crossAxisCount: 2,
  mainAxisSpacing: 8.0,
  crossAxisSpacing: 8.0,
  childAspectRatio: 0.555,
  padding: EdgeInsets.all(15.0),
  itemBuilder: (context, entry, index) {
    // 返回一个用于展示entry数据的小部件
  },
  pageFuture: (pageIndex) async {
    // 返回一个异步操作的结果,该结果应包含所需页面的数据列表
  },
);

PagewiseListView 示例

PagewiseListView(
  pageSize: 10,
  padding: EdgeInsets.all(15.0),
  itemBuilder: (context, entry, index) {
    // 返回一个用于展示entry数据的小部件
  },
  pageFuture: (pageIndex) async {
    // 返回一个异步操作的结果,该结果应包含所需页面的数据列表
  }
);

自定义加载/错误界面

loadingBuilder: (context) => Text('Loading...'),
errorBuilder: (context, error) => Text('Error: $error'),
noItemsFoundBuilder: (context) => Text('No Items Found'),
retryBuilder: (context, callback) => RaisedButton(
  child: Text('Retry'),
  onPressed: () => callback()
);

结合RefreshIndicator刷新页面

final _pageLoadController = PagewiseLoadController(
  pageSize: 6,
  pageFuture: BackendService.getPage
);

@override
Widget build(BuildContext context) {
  return RefreshIndicator(
    onRefresh: () async {
      this._pageLoadController.reset();
      await Future.value({});
    },
    child: PagewiseListView(
        itemBuilder: this._itemBuilder,
        pageLoadController: this._pageLoadController,
    ),
  );
}

监听加载状态变化

final _pageLoadController = PagewiseLoadController(
  pageSize: 6,
  pageFuture: BackendService.getPage
);

@override
void initState() {
  super.initState();
  this._pageLoadController.addListener(() {
    if (!this._pageLoadController.hasMoreItems) {
      Scaffold.of(context).showSnackBar(
        SnackBar(
          content: Text('No More Items!')
        )
      );
    }
  });
}

以上就是关于如何使用flutter_pagewise进行分页加载的基本介绍。如果你还有其他问题或者需要进一步的帮助,请随时提问!


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

1 回复

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


当然,下面是一个使用 flutter_pagewise 插件进行分页加载的示例代码。flutter_pagewise 是一个非常方便的 Flutter 插件,用于处理分页数据加载。

首先,确保在你的 pubspec.yaml 文件中添加 flutter_pagewise 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_pagewise: ^2.0.0  # 请检查最新版本号

然后运行 flutter pub get 来获取依赖。

接下来,以下是一个完整的示例代码,展示如何使用 flutter_pagewise 插件进行分页加载:

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Pagewise Example'),
      ),
      body: PagewiseListView<int>(
        pageController: _pageController,
        pageSize: 20, // 每页加载的项目数
        initialPage: 0,
        itemBuilder: (context, item, index) {
          return ListTile(
            title: Text('Item $item'),
          );
        },
        pageFuture: (pageIndex) async {
          // 模拟网络请求,返回一个 Future<List<int>>
          await Future.delayed(Duration(seconds: 1)); // 模拟延迟
          int start = pageIndex * 20;
          int end = start + 20;
          return List.generate(20, (i) => start + i);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 刷新数据
          _pageController.jumpToPage(0);
        },
        tooltip: 'Refresh',
        child: Icon(Icons.refresh),
      ),
    );
  }

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

代码说明:

  1. 依赖添加:确保在 pubspec.yaml 中添加了 flutter_pagewise 依赖。
  2. PagewiseListView
    • pageController:用于控制分页加载的控制器。
    • pageSize:每页加载的项目数。
    • initialPage:初始加载的页码。
    • itemBuilder:用于构建每个项目的 Widget。
    • pageFuture:一个函数,用于获取每一页的数据。它接收页码 pageIndex 并返回一个 Future<List<T>>
  3. 模拟网络请求:在 pageFuture 中,使用 Future.delayed 模拟网络请求延迟,并生成一个包含 20 个项目的列表。
  4. 刷新数据:使用 FloatingActionButton 触发数据刷新,通过 pageController.jumpToPage(0) 回到第一页,从而重新加载数据。

这个例子展示了如何使用 flutter_pagewise 插件进行分页加载,并提供了基本的刷新功能。你可以根据实际需求进一步定制和扩展。

回到顶部