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

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

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

Load More Listview 是一个Flutter插件，它提供了一个带有“加载更多”项和刷新功能的ListView。通过这个插件，可以轻松实现分页加载效果，提升用户体验。

开始使用

添加依赖

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

dependencies:
  ...
  loadmore_listview: ^1.0.7

然后执行 flutter pub get 来安装依赖。

导入包

在 Dart 文件中导入插件：

import 'package:loadmore_listview/loadmore_listview.dart';

使用示例

以下是几种常见的使用方式示例：

LoadMoreListView.builder

LoadMoreListView.builder 是最常用的构建分页加载列表的方式。它允许你根据索引动态生成列表项，并支持下拉刷新和上拉加载更多。

LoadMoreListView.builder(
    // 是否还有更多数据可加载
    haveMoreItem: true,
    // 触发底部加载更多的回调
    onLoadMore: () async {
      // 模拟API请求，实际开发中应替换为真实的API调用
      await Future.delayed(const Duration(seconds: 1));
    },
    // 下拉刷新的回调
    onRefresh: () async {
      // 模拟API请求，实际开发中应替换为真实的API调用
      await Future.delayed(const Duration(seconds: 1));
    },
    // 自定义加载更多的动画组件
    loadMoreWidget: Container(
        margin: const EdgeInsets.all(20.0),
        alignment: Alignment.center,
        child: const CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(Colors.blueAccent),
        ),
    ),
    // 列表项数量
    itemCount: 20,
    // 构建每个列表项的回调
    itemBuilder: (context, index) {
        return Container(
            margin: const EdgeInsets.all(30),
            width: double.infinity,
            alignment: Alignment.center,
            child: Text('$index'),
        );
    },
);

LoadMoreListView.separated

LoadMoreListView.separated 用于创建带有分隔符的分页加载列表。它除了支持分页加载外，还可以在每个列表项之间插入分隔符。

LoadMoreListView.separated(
    // ...
    separatorBuilder: (context, index) {
      return const Divider();
    },
);

LoadMoreListView.customScrollView

LoadMoreListView.customScrollView 提供了更灵活的布局方式，适用于复杂的页面结构。你可以通过 SliverList 或其他 Sliver 组件来构建自定义的滚动视图。

LoadMoreListView.customScrollView(
    // ...
    slivers: [
        SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return Container(
                  margin: const EdgeInsets.all(30),
                  width: double.infinity,
                  alignment: Alignment.center,
                  child: Text(list[index]),
                );
              },
              childCount: list.length,
            ),
        ),
    ],
);

完整示例代码

下面是一个完整的示例代码，展示了如何在一个应用程序中集成 LoadMoreListView 插件，包括Tab切换、分页加载和刷新功能。

import 'package:flutter/material.dart';
import 'package:loadmore_listview/loadmore_listview.dart';
import 'dart:math';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  final List<Widget> _tabs = const [
    Tab(text: 'builder'),
    Tab(text: 'separated'),
    Tab(text: 'customScrollView'),
  ];
  late TabController _tabController;
  bool _hasNextData = true;
  List<String> list = [];
  final _chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz';
  final Random _rnd = Random();

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
    WidgetsBinding.instance.addPostFrameCallback((_) => getList());
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Load More and Refresh'),
        ),
        body: Column(
          children: [
            TabBar(
              controller: _tabController,
              labelColor: Colors.black,
              tabs: _tabs,
              onTap: (index) {
                getList();
              },
            ),
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [
                  LoadMoreListView.builder(
                    hasMoreItem: _hasNextData,
                    onLoadMore: loaMoreList,
                    onRefresh: refreshList,
                    refreshBackgroundColor: Colors.blueAccent,
                    refreshColor: Colors.white,
                    loadMoreWidget: Container(
                      margin: const EdgeInsets.all(20.0),
                      alignment: Alignment.center,
                      child: const CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation(Colors.blueAccent),
                      ),
                    ),
                    itemCount: list.length,
                    itemBuilder: (context, index) {
                      return Container(
                        margin: const EdgeInsets.all(30),
                        width: double.infinity,
                        alignment: Alignment.center,
                        child: Text(list[index]),
                      );
                    },
                  ),
                  LoadMoreListView.separated(
                    hasMoreItem: _hasNextData,
                    onLoadMore: loaMoreList,
                    onRefresh: refreshList,
                    refreshBackgroundColor: Colors.blueAccent,
                    refreshColor: Colors.white,
                    loadMoreWidget: Container(
                      margin: const EdgeInsets.all(20.0),
                      alignment: Alignment.center,
                      child: const CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation(Colors.blueAccent),
                      ),
                    ),
                    itemCount: list.length,
                    itemBuilder: (context, index) {
                      return Container(
                        margin: const EdgeInsets.all(30),
                        width: double.infinity,
                        alignment: Alignment.center,
                        child: Text(list[index]),
                      );
                    },
                    separatorBuilder: (context, index) {
                      return const Divider();
                    },
                  ),
                  LoadMoreListView.customScrollView(
                    hasMoreItem: _hasNextData,
                    onLoadMore: loaMoreList,
                    onRefresh: refreshList,
                    refreshBackgroundColor: Colors.blueAccent,
                    refreshColor: Colors.white,
                    loadMoreWidget: Container(
                      margin: const EdgeInsets.all(20.0),
                      alignment: Alignment.center,
                      child: const CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation(Colors.blueAccent),
                      ),
                    ),
                    slivers: [
                      SliverList(
                        delegate: SliverChildBuilderDelegate(
                          (context, index) {
                            return Container(
                              margin: const EdgeInsets.all(30),
                              width: double.infinity,
                              alignment: Alignment.center,
                              child: Text(list[index]),
                            );
                          },
                          childCount: list.length,
                        ),
                      )
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future getList() async {
    list.clear();
    _hasNextData = true;
    setState(() {
      for (int i = 0; i < 20; i++) {
        list.add(getRandomString(10));
      }
    });
  }

  Future refreshList() async {
    list.clear();
    await loaMoreList();
  }

  Future loaMoreList() async {
    await Future.delayed(const Duration(seconds: 1)); //await API Response
    setState(() {
      for (int i = 0; i < 20; i++) {
        list.add(getRandomString(10));
      }
      _hasNextData = list.length < 100;
    });
  }

  String getRandomString(int length) => String.fromCharCodes(
      Iterable.generate(length, (_) => _chars.codeUnitAt(_rnd.nextInt(_chars.length))));
}

以上就是 loadmore_listview 插件的使用方法及完整示例代码，希望对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用loadmore_listview插件来实现分页加载列表的示例代码。loadmore_listview插件可以帮助你轻松实现分页加载功能。

首先，确保你已经在pubspec.yaml文件中添加了loadmore_listview依赖：

dependencies:
  flutter:
    sdk: flutter
  loadmore_listview: ^2.0.0  # 请使用最新版本

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示了如何使用LoadMoreListView来实现分页加载：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = [];
  bool isLoading = false;
  int pageIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LoadMore ListView Example'),
      ),
      body: LoadMoreListView(
        onLoadMore: _loadMoreData,
        onLoadEnd: _onLoadEnd,
        controller: LoadMoreController(
          initialLoadSize: 20,
          maxLoadSize: 20,
        ),
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item ${items[index]}'),
          );
        },
      ),
    );
  }

  Future<void> _loadMoreData() async {
    setState(() {
      isLoading = true;
    });

    // 模拟网络请求延迟
    await Future.delayed(Duration(seconds: 1));

    int start = items.length;
    int end = start + 20;
    for (int i = start; i < end && i < 100; i++) { // 模拟总共100条数据
      items.add('Item $i');
    }

    setState(() {
      isLoading = false;
    });
  }

  void _onLoadEnd() {
    print('No more data to load.');
  }
}

代码解释：

  1. 依赖导入：在pubspec.yaml中添加loadmore_listview依赖，并运行flutter pub get。

  2. 主应用：创建一个简单的Flutter应用，包含一个MaterialApp和一个MyHomePage。

  3. 状态管理：在MyHomePage中，使用StatefulWidget来管理状态。定义了一个items列表来存储加载的数据，以及isLoading和pageIndex来控制加载状态。

  4. 构建UI：在build方法中，使用LoadMoreListView组件来显示列表，并配置onLoadMore和onLoadEnd回调。

  5. 加载更多数据：_loadMoreData方法模拟了从网络加载更多数据的过程，并将新数据添加到items列表中。这里使用Future.delayed来模拟网络请求的延迟。

  6. 加载结束处理：_onLoadEnd方法会在数据加载结束时被调用，这里简单地打印了一条消息。

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

回到顶部