Flutter上下拉刷新插件flutter_pull_up_down_refresh的使用

Flutter上下拉刷新插件flutter_pull_up_down_refresh的使用

flutter_pull_up_down_refresh #

Pub Package

这是一个功能丰富的Flutter插件,用于实现上下拉刷新。

Image
flutter_pull_up_down_refresh

特性

  • 下拉刷新数据
  • 上拉加载更多数据
  • 显示刷新指示器
  • 更改加载颜色
  • 更改背景加载颜色
  • 更改刷新指示器颜色
  • 显示底部加载
  • 调整底部加载大小
  • 更改底部加载颜色选项

使用方法

确保查看示例代码

安装

pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter_pull_up_down_refresh: ^1.0.4

基本设置

完整的示例代码可以在这里找到。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Example flutter Pull & down Refresh"),
        ),
        body: FlutterPullUpDownRefresh(
          scrollController: ScrollController(), // 滚动控制器
          showRefreshIndicator: true, // 是否显示刷新指示器
          refreshIndicatorColor: Colors.red, // 刷新指示器颜色
          isLoading: false, // 是否正在加载
          loadingColor: Colors.red, // 加载颜色
          loadingBgColor: Colors.grey.withAlpha(100), // 加载背景颜色
          isBootomLoading: false, // 是否正在加载更多数据
          bottomLoadingColor: Colors.green, // 底部加载颜色
          scaleBottomLoading: 0.6, // 底部加载大小缩放
          onRefresh: () async {
            // 开始刷新
            await pullRefresh();
            // 结束刷新
          },
          onAtBottom: (status) {
            if (status) {
              if (kDebugMode) {
                print("Scroll at bottom");
                if (!isBottom) {
                  isBottom = true;
                  listItem();
                }
              }
            }
          },
          onAtTop: (status) {
            if (kDebugMode) {
              print("Scroll at Top");
            }
          },
          child: ListView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(), // 禁止ListView滚动
            itemCount: lists.length,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.only(
                  left: 10,
                  right: 10,
                  bottom: 5,
                  top: 5,
                ),
                child: Text("item $index")
              );
            }
          )
        ),
      ),
    );
  }
}

注意:如果使用ListView作为子组件,请不要忘记添加NeverScrollableScrollPhysics()以禁用ListView滚动。

事件

使用onRefresh刷新数据:

onRefresh: () async {
  // 开始刷新
  await pullRefresh();
  // 结束刷新
},

使用onAtBottom加载更多数据:

onAtBottom: (status) {
  if (status) {
    if (kDebugMode) {
      print("Scroll at bottom");
      if (!isBottom) {
        isBottom = true;
        listItem();
      }
    }
  }
},

使用onAtTop仅用于通知滚动停留在顶部:

onAtTop: (status) {
  if (kDebugMode) {
    print("Scroll at Top");
  }
},

更多关于Flutter上下拉刷新插件flutter_pull_up_down_refresh的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter上下拉刷新插件flutter_pull_up_down_refresh的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter中使用flutter_pull_up_down_refresh插件来实现上下拉刷新功能的示例代码。这个插件允许你在Flutter应用中轻松实现下拉刷新和上拉加载更多的功能。

首先,确保你已经在pubspec.yaml文件中添加了该插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_pull_up_down_refresh: ^0.0.2  # 请注意版本号,这里是一个示例版本,使用时应检查最新版本

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

接下来,在你的Dart文件中,你可以按照以下方式使用flutter_pull_up_down_refresh插件:

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _items = List<String>.generate(20, (i) => "Item $i");
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pull Up & Down Refresh Demo'),
      ),
      body: SmartRefresher(
        enablePullDown: true,
        enablePullUp: true,
        header: WaterDropHeader(),
        footer: ClassicsFooter(),
        onRefresh: _onRefresh,
        onLoad: _onLoad,
        controller: RefreshController(),
        child: ListView.builder(
          itemCount: _items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_items[index]),
            );
          },
        ),
      ),
    );
  }

  Future<void> _onRefresh() async {
    setState(() {
      _isLoading = true;
    });
    // 模拟网络请求延迟
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _isLoading = false;
      _items.clear();
      _items.addAll(List<String>.generate(20, (i) => "Refreshed Item $i"));
    });
    // 结束刷新状态
    RefreshController().refreshCompleted();
  }

  Future<void> _onLoad() async {
    setState(() {
      _isLoading = true;
    });
    // 模拟网络请求延迟
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _isLoading = false;
      int start = _items.length;
      _items.addAll(List<String>.generate(10, (i) => "Loaded Item ${start + i}"));
    });
    // 结束加载更多状态
    RefreshController().loadComplete();
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个ListView,该ListView支持下拉刷新和上拉加载更多。SmartRefresher组件是flutter_pull_up_down_refresh插件提供的核心组件,它封装了下拉刷新和上拉加载更多的逻辑。

  • enablePullDownenablePullUp属性分别控制是否启用下拉刷新和上拉加载更多功能。
  • headerfooter属性分别定义了下拉刷新和上拉加载更多的动画效果,这里使用了WaterDropHeaderClassicsFooter作为示例。
  • onRefreshonLoad回调分别处理下拉刷新和上拉加载更多的逻辑。
  • RefreshController用于控制刷新状态,比如结束刷新或加载更多的状态。

这个示例展示了如何使用flutter_pull_up_down_refresh插件来实现基本的上下拉刷新功能,你可以根据自己的需求进一步定制和扩展。

回到顶部