Flutter下拉刷新插件rive_pull_to_refresh的使用

rive_pull_to_refresh

简介

• 使用Rive、图像、GIF等自定义刷新指示器。

• 快速集成rive。

• 提供回调以处理下拉刷新动作：

  • 客户端下拉或上拉时的值。
  • 停止滚动。
  • 关闭头部。

• 可定制：

  • 浮动、头部模式。
  • 拉动百分比以激活刷新。
  • 持续时间、曲线等。

planet-header	planet-floating	planet-bottom

liquid	bow	space

lipid	liquid_v1

警告

• 您必须了解一些Rive知识。如果不懂，可以使用示例中的现有Rive文件（无法从Flutter编辑颜色）。

Flutter

1. 添加依赖

在您的包的pubspec.yaml文件中添加以下内容：

rive_pull_to_refresh: ^1.0.4+6

2. 安装依赖

您可以从命令行安装包：

使用dart:

dart pub get

使用Flutter:

flutter pub get

3. 导入库

在您的Dart文件中导入：

import 'package:rive_pull_to_refresh/rive_pull_to_refresh.dart';

4. 设置物理属性

BouncingScrollPhysics可能会影响插件的正常工作，因此请设置滚动小部件的物理属性：

ListView.builder(
  physics: const ClampingScrollPhysics(
    parent: AlwaysScrollableScrollPhysics(),
  ),
  // 其他代码...
)

Rive

检查Rive编辑器以了解状态机和输入：

示例使用Rive文件

您可以从以下来源获取Rive文件：

• JcToon: 社区
• Drawsgood: 社区
• RiveExamples: 社区

感谢所有贡献者。

支持该插件（可选）

如果您发现此插件有用，可以通过点赞或购买咖啡来支持它。非常感谢！

示例代码

import 'package:flutter/material.dart';
import 'package:rive_pull_to_refresh_example/pages/bow.dart';
import 'package:rive_pull_to_refresh_example/pages/gif.dart';
import 'package:rive_pull_to_refresh_example/pages/image.dart';
import 'package:rive_pull_to_refresh_example/pages/liquid.dart';
import 'package:rive_pull_to_refresh_example/pages/liquid_v1.dart';
import 'package:rive_pull_to_refresh_example/pages/planet.dart';
import 'package:rive_pull_to_refresh_example/pages/pull_rf_lipid.dart';
import 'package:rive_pull_to_refresh_example/pages/space_reload.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: <String, WidgetBuilder>{
        Planet.route: (BuildContext context) {
          return const Planet();
        },
        Liquid.route: (BuildContext context) {
          return const Liquid();
        },
        LiquidV1.route: (BuildContext context) {
          return const LiquidV1();
        },
        MainPage.route: (BuildContext context) {
          return const MainPage();
        },
        Gif.route: (BuildContext context) {
          return const Gif();
        },
        SpaceReload.route: (BuildContext context) {
          return const SpaceReload();
        },
        PullRflipid.route: (BuildContext context) {
          return const PullRflipid();
        },
        ImageR.route: (BuildContext context) {
          return const ImageR();
        },
        Bow.route: (BuildContext context) {
          return const Bow();
        },
      },
    );
  }
}

class MainPage extends StatefulWidget {
  static const String route = "/";
  const MainPage({super.key});

  [@override](/user/override)
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Rive Pull To Refresh"),
      ),
      body: SafeArea(
        child: Column(
          children: [
            AppButton(
              title: "Planet",
              onPress: () => Navigator.pushNamed(context, Planet.route),
            ),
            AppButton(
              title: "Liquid",
              onPress: () => Navigator.pushNamed(
                context,
                Liquid.route,
              ),
            ),
            AppButton(
              title: "LiquidV1",
              onPress: () => Navigator.pushNamed(
                context,
                LiquidV1.route,
              ),
            ),
            AppButton(
              title: "Gif",
              onPress: () => Navigator.pushNamed(
                context,
                Gif.route,
              ),
            ),
            AppButton(
              title: "Space",
              onPress: () => Navigator.pushNamed(
                context,
                SpaceReload.route,
              ),
            ),
            AppButton(
              title: "Lipid",
              onPress: () => Navigator.pushNamed(
                context,
                PullRflipid.route,
              ),
            ),
            AppButton(
              title: "Image",
              onPress: () => Navigator.pushNamed(
                context,
                ImageR.route,
              ),
            ),
            AppButton(
              title: "Bow",
              onPress: () => Navigator.pushNamed(
                context,
                Bow.route,
              ),
            )
          ],
        ),
      ),
    );
  }
}

class AppButton extends StatelessWidget {
  const AppButton({this.title = "", this.onPress, super.key});
  final String title;
  final Function()? onPress;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(15.0),
      child: InkWell(
        onTap: onPress,
        child: Container(
          color: Colors.blueAccent,
          height: 50,
          width: double.infinity,
          child: Center(child: Text(title)),
        ),
      ),
    );
  }
}