Flutter垂直加载更多插件vertical_load_more的使用

介绍

本插件帮助你在Flutter应用中实现垂直滚动列表的无限加载和下拉刷新功能。如果你正在寻找这样的功能，你已经找到了正确的地方。

安装

你可以通过以下方式将插件添加到你的项目中：

dart pub add vertical_load_more

或者

flutter pub add vertical_load_more

使用方法

为了使用这个插件，你需要提供加载数据的方法、刷新数据的方法以及该插件的控制器。你可以在VerticalLoadMoreController中设置hasMore属性来控制是否还有更多数据可以加载。

示例代码

下面是一个完整的示例代码，展示了如何使用vertical_load_more插件实现一个带有无限加载和下拉刷新功能的列表。

import 'dart:math';

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

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

/// 示例应用程序
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late List<Map<String, dynamic>> data;

  Random randomColor = Random();
  VerticalLoadMoreController verticalLoadMoreController = VerticalLoadMoreController();

  [@override](/user/override)
  void initState() {
    // 初始化时设置是否有更多数据可加载
    verticalLoadMoreController.hasMore = true;
    setData();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vertical Load More Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: VerticalLoadMore(
            child: ListView.builder(
              itemBuilder: (_, index) {
                return Container(
                  margin: const EdgeInsets.all(10),
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: data[index]["color"],
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Text(
                    data[index]["value"].toString(),
                    style: Theme.of(context).textTheme.headline3,
                  ),
                );
              },
              itemCount: data.length,
            ),
            onLoadMore: onMoreData,
            onRefresh: onRefresh,
            controller: verticalLoadMoreController,
          ),
        ),
      ),
    );
  }

  Future<void> onMoreData() async {
    // 模拟数据加载延迟
    await Future.delayed(const Duration(milliseconds: 500), () {
      setState(() {
        // 设置是否有更多数据可加载
        verticalLoadMoreController.hasMore = true;
        // 添加新的数据到现有列表
        data.addAll(
          List.generate(
            10,
            (index) => {
              "value": "ស្រុករំដួល",
              "color": Color.fromRGBO(
                randomColor.nextInt(255),
                randomColor.nextInt(255),
                randomColor.nextInt(255),
                0.4,
              ),
            },
          ),
        );
      });
    });
  }

  Future<void> onRefresh() async {
    // 模拟刷新延迟
    await Future.delayed(const Duration(milliseconds: 500), () {
      setState(() {
        // 设置是否有更多数据可加载
        verticalLoadMoreController.hasMore = true;
        // 重新生成数据列表
        data = List.generate(
          10,
          (index) => {
            "value": "ទីក្រុងគុជ",
            "color": Color.fromRGBO(
              randomColor.nextInt(255),
              randomColor.nextInt(255),
              randomColor.nextInt(255),
              0.4,
            ),
          },
        );
      });
    });
  }

  void setData() {
    data = List.generate(
      10,
      (index) => {
        "value": "ខ្មែរស្រឡាញ់ខ្មែរKSK",
        "color": Color.fromRGBO(
          randomColor.nextInt(255),
          randomColor.nextInt(255),
          randomColor.nextInt(255),
          0.4,
        ),
      },
    );
  }
}