Flutter 动态加载内容插件 loadany 的使用

LoadAny 是一个用于 Flutter 应用的动态加载更多数据的插件。它支持多种滚动视图，如 CustomScrollView, SliverListView, 和 SliverGridView 等，并提供了自定义加载样式、外部嵌套刷新指示器等功能。

支持的功能

• CustomScrollView
• SliverListView
• SliverGridView
• ListView 替代方案
• GridView 替代方案
• 自定义加载样式
• 外部嵌套 RefreshIndicator
• 流式加载

使用方法

添加依赖

首先，在 pubspec.yaml 文件中添加 loadany 依赖：

dependencies:
  loadany: ^最新版本号

然后在 Dart 文件中导入：

import 'package:loadany/loadany.dart';

示例代码

以下是一个完整的示例，展示了如何使用 LoadAny 插件实现下拉刷新和上拉加载更多功能。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:loadany/loadany.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// 测试数据
  List<int> list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  /// 加载状态
  LoadStatus status = LoadStatus.normal;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        onRefresh: () async {
          if (status == LoadStatus.normal) {
            await Future.delayed(Duration(seconds: 3));
            list.removeRange(10, list.length);
            setState(() {});
          }
        },
        child: LoadAny(
          onLoadMore: getLoadMore,
          status: status,
          loadingMsg: '加载中...',
          errorMsg: '加载错误，点击重试',
          finishMsg: '没有更多啦',
          footerHeight: 40,
          endLoadMore: true,
          bottomTriggerDistance: 200,
          child: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                pinned: true,
                expandedHeight: 250.0,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text('Load More Demo'),
                  background: Image.network(
                    'https://cdn.pixabay.com/photo/2019/07/15/17/13/flower-4339932__480.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              SliverGrid(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Container(
                      margin: EdgeInsets.all(10),
                      color: Colors.blue,
                      alignment: Alignment.center,
                      child: Image.network(
                        'https://cdn.pixabay.com/photo/2019/07/21/04/28/silk-tree-4351925__480.jpg',
                        width: double.maxFinite,
                        height: double.maxFinite,
                        fit: BoxFit.cover,
                      ),
                    );
                  },
                  childCount: 12,
                ),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 4,
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return _buildItem(index);
                  },
                  childCount: list.length,
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          list.clear();
          status = LoadStatus.normal;
          setState(() {});
        },
        tooltip: 'Increment',
        child: Icon(Icons.refresh),
      ),
    );
  }

  /// 构建 item
  Widget _buildItem(int index) {
    return Container(
      color: Colors.blue,
      margin: EdgeInsets.all(10),
      height: 80,
      child: Center(
        child: Text('${list[index]}'),
      ),
    );
  }

  /// 加载更多
  Future<void> getLoadMore() async {
    setState(() {
      status = LoadStatus.loading;
    });
    Timer.periodic(Duration(milliseconds: 5000), (Timer timer) {
      timer.cancel();
      int length = list.length;
      for (var i = 1; i < 11; ++i) {
        list.add(length + i);
      }

      if (length > 80) {
        status = LoadStatus.completed;
      } else if (length >= 50 && length < 70) {
        status = LoadStatus.error;
      } else {
        status = LoadStatus.normal;
      }
      setState(() {});
    });
  }
}

关键配置项说明

• onLoadMore: 加载更多数据的回调函数。
• status: 当前加载状态（正常、加载中、错误、完成）。
• loadingMsg: 加载中的提示信息。
• errorMsg: 错误提示信息。
• finishMsg: 数据加载完成后的提示信息。
• footerHeight: 底部加载区域的高度。
• endLoadMore: 是否在数据加载完成后隐藏加载区域。
• bottomTriggerDistance: 触发加载更多的距离阈值。

截图展示

以下是不同状态下的截图：

• 加载中

• 加载错误

• 加载完成

反馈与问题

如果您有任何反馈或遇到问题，请在 GitHub Issues 中提交问题。感谢您的支持！