Flutter下拉刷新功能插件refreshable_widget的使用

Flutter下拉刷新功能插件refreshable_widget的使用

目标 🏹

Refreshable Widget 为了解决以下两个Stackoverflow问题而构建，也用于个人使用。

可能的应用场景： 你有一个使用FutureBuilder的widget，展示异步数据。但你需要定期更新它，因为没有可以监听的socket或stream。 例如，在游戏中用户进度的展示，需要每20秒获取整个游戏的数据。

安装 💻

❗ 要开始使用Refreshable Widget，必须在你的机器上安装Flutter SDK。

在pubspec.yaml文件中添加refreshable_builder：

dependencies:
  refreshable_builder:

安装它：

flutter packages get

使用 🛞

下面是一个完整的示例代码，展示了如何使用RefreshableWidget插件。

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

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

class _MyHomePageState extends State<MyHomePage> {
  // 假设这里有一个服务类，用于获取挑战数据
  ChallengeService service = ChallengeService();

  // 挑战ID
  String challengeId = "challenge_123";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Refreshable Widget Demo'),
      ),
      body: Center(
        child: RefreshableWidget<num>(
          // 可选的初始值，如果有的话
          initialValue: 0,
          // 你的API调用或逻辑来刷新数据
          refreshCall: () async {
            final challenge = await service.getChallenge(id: challengeId);
            return challenge.userParticipation!.donePercent;
          },
          refreshRate: const Duration(seconds: 20),
          // 构建器，每次从refreshCall获得新值时被调用
          builder: (context, value) {
            return ProgressWidget(
              percent: value,
            );
          },
          // 可选的错误和加载小部件
        ),
      ),
    );
  }
}

// 进度条小部件
class ProgressWidget extends StatelessWidget {
  final double percent;

  ProgressWidget({required this.percent});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 20,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(10),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: LinearProgressIndicator(
          value: percent / 100,
          backgroundColor: Colors.grey[200],
          valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
        ),
      ),
    );
  }
}

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

1 回复

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


在 Flutter 中实现下拉刷新功能，除了使用 RefreshIndicator 之外，你还可以使用第三方插件 refreshable_widget。这个插件提供了更灵活的方式来处理下拉刷新和上拉加载更多的功能。下面是如何使用 refreshable_widget 插件的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 refreshable_widget 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  refreshable_widget: ^0.1.0  # 请检查最新版本

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

2. 基本使用

refreshable_widget 提供了一个 RefreshableWidget 组件，你可以将它包裹在你的列表或其他可滚动组件外面来实现下拉刷新和上拉加载更多的功能。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Refreshable Widget Example'),
        ),
        body: RefreshableWidgetExample(),
      ),
    );
  }
}

class RefreshableWidgetExample extends StatefulWidget {
  @override
  _RefreshableWidgetExampleState createState() => _RefreshableWidgetExampleState();
}

class _RefreshableWidgetExampleState extends State<RefreshableWidgetExample> {
  List<String> items = List.generate(20, (index) => "Item $index");

  Future<void> _refresh() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      items = List.generate(20, (index) => "Refreshed Item $index");
    });
  }

  Future<void> _loadMore() async {
    // 模拟加载更多
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      items.addAll(List.generate(5, (index) => "Loaded Item ${items.length + index}"));
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshableWidget(
      onRefresh: _refresh,
      onLoadMore: _loadMore,
      child: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index]),
          );
        },
      ),
    );
  }
}

3. 参数说明

  • onRefresh: 下拉刷新时触发的回调函数，通常在这里执行数据刷新操作。
  • onLoadMore: 上拉加载更多时触发的回调函数，通常在这里执行加载更多数据的操作。
  • child: 你要刷新的子组件，通常是一个 ListView 或其他可滚动组件。

4. 自定义刷新和加载更多的指示器

你可以通过 refreshIndicator 和 loadMoreIndicator 参数来自定义刷新和加载更多的指示器。

RefreshableWidget(
  onRefresh: _refresh,
  onLoadMore: _loadMore,
  refreshIndicator: RefreshIndicator(
    onRefresh: _refresh,
    child: ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(items[index]),
        );
      },
    ),
  ),
  loadMoreIndicator: Center(
    child: CircularProgressIndicator(),
  ),
)

5. 其他配置

refreshable_widget 还提供了其他一些配置选项，比如 enablePullDown 和 enablePullUp 来控制是否启用下拉刷新和上拉加载更多。

RefreshableWidget(
  onRefresh: _refresh,
  onLoadMore: _loadMore,
  enablePullDown: true,
  enablePullUp: true,
  child: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(items[index]),
      );
    },
  ),
)
回到顶部