Flutter加载更多功能插件cupertino_load_more的使用

Flutter加载更多功能插件cupertino_load_more的使用

一个类似于CupertinoSliverRefreshControl的加载更多组件。

特性

  • 支持 CustomerScrollView
  • 支持自动加载和预加载（仅当缓存高度大于0时）
  • 使用方式与 CupertinoSliverRefreshControl 类似

演示

在线演示可查看 此处

使用方法

late ValueNotifier<int> _count;

Future<void> loadMore() async {
  await Future.delayed(const Duration(seconds: 1));
  _count.value = _count.value + 8;
}

CustomScrollView(
  slivers: [
    ValueListenableBuilder(
      valueListenable: _count,
      builder: (context, value, _) {
        return SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return ListTile(title: Text('Item $index'));
            },
            childCount: value,
          ),
        );
      },
    ),
    LoadMoreController(
      onLoad: loadMore,
    ),
  ],
);

其他信息

CustomScrollView(
  cacheExtent: 500,
  slivers: [
    LoadMoreController(
      onLoad: loadMore,
      autoLoad: true,
    )
  ],
);

如果 autoLoad 参数为 true：

  • 当视口未被填满时，将调用 <code>onLoad</code>
  • 当 <code>LoadMoreController</code> 到达视口的 <code>cacheExtent</code> 时，将调用 <code>onLoad</code>。可以通过调整 <code>cacheExtent</code> 来控制预加载时机。

完整示例代码

import 'package:example/auto_load.dart';
import 'package:example/auto_load_horizontal.dart';
import 'package:example/classic.dart';
import 'package:example/classic_horizontal.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:example/tool/general.dart' as general;
import 'package:flutter/rendering.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: const CupertinoNavigationBar(middle: Text('home')),
        body: Builder(builder: (context) {
          if (!general.isMobile()) {
            return const Center(
              child: Column(mainAxisSize: MainAxisSize.min, children: [
                Text('打开此示例请使用移动设备上的浏览器。'),
                Text('或者在开发工具中切换到移动模式。'),
              ]),
            );
          }
          return ListView(
            children: const [
              [Classic(), '默认经典样式'],
              [ClassicHori(), '默认经典水平样式'],
              [AutoLoad(), '自动加载和预加载'],
              [AutoLoadHori(), '水平方向自动加载'],
            ]
                .map((e) => ListTile(
                      title: Text(e[1] as String),
                      onTap: () => Navigator.of(context).push(
                          CupertinoPageRoute(builder: (_) => e[0] as Widget)),
                    ))
                .toList(),
          );
        }),
      ),
    );
  }
}

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

1 回复

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


cupertino_load_more 是一个用于在 Flutter 中实现加载更多功能的插件，它基于 Cupertino 设计风格。这个插件可以帮助你在列表或网格视图中实现加载更多的功能，类似于 iOS 风格的无限滚动。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 cupertino_load_more 依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_load_more: ^1.0.0

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

使用 cupertino_load_more 插件

以下是一个简单的示例，展示如何使用 cupertino_load_more 插件实现加载更多功能。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoadMoreDemo(),
    );
  }
}

class LoadMoreDemo extends StatefulWidget {
  [@override](/user/override)
  _LoadMoreDemoState createState() => _LoadMoreDemoState();
}

class _LoadMoreDemoState extends State<LoadMoreDemo> {
  List<int> items = List.generate(20, (index) => index);
  bool isLoading = false;

  Future<void> _loadMore() async {
    if (isLoading) return;

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

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

    setState(() {
      items.addAll(List.generate(10, (index) => items.length + index));
      isLoading = false;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cupertino Load More Demo'),
      ),
      body: CupertinoLoadMore(
        onLoadMore: _loadMore,
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item ${items[index]}'),
            );
          },
        ),
        isLoading: isLoading,
        indicatorBuilder: (context, status) {
          if (status == LoadMoreStatus.loading) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          return Container();
        },
      ),
    );
  }
}
回到顶部