Flutter分页加载列表插件loading_more_list_library的使用

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

Flutter分页加载列表插件loading_more_list_library的使用

loading_more_list_library 是一个 Dart 包，用于实现分页加载列表。它提供了核心类来帮助开发者轻松地在 Flutter 应用程序中实现分页功能。

使用示例

以下是一个完整的示例，演示如何使用 loading_more_list_library 插件来实现分页加载列表。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('分页加载列表')),
        body: LoadingMoreList(
          shrinkWrap: true,
          padding: EdgeInsets.all(8.0),
          headerBuilder: (context) => Text("加载中..."),
          footerBuilder: (context) => Text("没有更多数据了"),
          listController: ListController(),
          itemBuilder: (context, item) => ListTile(
            title: Text(item.toString()),
          ),
          sourceList: InfiniteScrollListSource(
            loadMore: (int page) async {
              // 模拟网络请求
              await Future.delayed(Duration(seconds: 2));
              if (page == 1) {
                return List<int>.generate(10, (index) => index + 1);
              } else {
                return List<int>.generate(10, (index) => index + 1 + page * 10);
              }
            },
            canLoadMore: (int page) {
              // 判断是否还有更多数据可以加载
              return page < 5; // 假设有5页数据
            },
          ),
        ),
      ),
    );
  }
}

// 自定义数据源类，继承自 InfiniteScrollListSource
class InfiniteScrollListSource extends BaseListStatefulWidget<int> {
  final Future<List<int>> Function(int page) loadMore;
  final bool Function(int page) canLoadMore;

  InfiniteScrollListSource({
    required this.loadMore,
    required this.canLoadMore,
  });

  [@override](/user/override)
  BaseListState<int> getState(ListController<int> listController) {
    return _InfiniteScrollListSourceState(listController);
  }
}

class _InfiniteScrollListSourceState extends BaseListState<int> {
  _InfiniteScrollListSourceState(ListController<int> listController)
      : super(listController);

  [@override](/user/override)
  Future<void> onLoadMore() async {
    final currentPage = listController.currentPage;
    final data = await widget.loadMore(currentPage);
    if (data.isEmpty) {
      listController.setHasMore(false);
    } else {
      listController.add(data);
    }
  }

  [@override](/user/override)
  bool get hasMore => widget.canLoadMore(listController.currentPage);
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 loading_more_list_library 插件在 Flutter 中实现分页加载列表的示例代码。假设你已经将 loading_more_list_library 添加到了你的 pubspec.yaml 文件中，并且已经运行了 flutter pub get。

首先，确保你的 pubspec.yaml 文件包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  loading_more_list: ^最新版本号  # 请替换为实际的最新版本号

然后，你可以按照以下步骤实现分页加载列表：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:loading_more_list/loading_more_list.dart';
  1. 创建分页加载数据的逻辑：

假设你有一个获取数据的函数 fetchData，它接受一个页码参数并返回一个 Future<List<数据类型>>。

Future<List<String>> fetchData(int page) async {
  // 模拟网络请求，这里使用延时来模拟
  await Future.delayed(Duration(seconds: 1));
  
  // 返回模拟数据，这里使用页码来生成数据项
  return List.generate(10, (index) => "Item ${(page - 1) * 10 + index + 1}");
}
  1. 使用 LoadingMoreList 组件：

在你的 Flutter 组件中使用 LoadingMoreList 来显示分页加载的列表。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final LoadController _loadController = LoadController();
  List<String> _dataList = [];
  int _currentPage = 1;

  @override
  void initState() {
    super.initState();
    _loadMore();
  }

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

  Future<void> _loadMore() async {
    try {
      final List<String> newData = await fetchData(_currentPage);
      setState(() {
        _dataList.addAll(newData);
      });
      if (newData.isEmpty) {
        _loadController.noMore();
      } else {
        _currentPage++;
      }
    } catch (e) {
      _loadController.error(e.toString());
    } finally {
      _loadController.finish();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('分页加载列表示例'),
        ),
        body: LoadingMoreList<String>(
          controller: _loadController,
          itemCount: _dataList.length,
          onLoadMore: _loadMore,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_dataList[index]),
            );
          },
        ),
      ),
    );
  }
}

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

在上面的代码中：

  • LoadController 用于控制加载状态。
  • _dataList 存储加载的数据。
  • _currentPage 记录当前页码。
  • _loadMore 函数负责加载更多数据，并在加载完成后更新状态。
  • LoadingMoreList 组件用于显示列表，并在需要时触发 _loadMore 函数加载更多数据。

这个示例展示了如何使用 loading_more_list_library 插件来实现分页加载列表的基本功能。你可以根据自己的需求进一步自定义和扩展这个示例。

回到顶部