Flutter动画与交互插件reflex的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter动画与交互插件reflex的使用

Reflex

Flutter插件用于通知读取与回复。

Flutter_Shortcuts

GitHub GitHub code size in bytes GitHub top language GitHub language count GitHub tag (latest by date) GitHub issues GitHub Repo stars GitHub forks

兼容性

✅   Android
❌   iOS (问题: iOS支持reflex)

显示一些爱心并收藏仓库

为什么使用Reflex?

Reflex插件的特点包括:

  • 快速、高性能且兼容性强
  • 免费且开源
  • 生产就绪
  • 使应用具备响应能力

特点

以下所有功能都可以在运行时执行:

  • 获取通知流
  • 读取通知
  • 从通知中回复
  • 自动回复

演示

演示

快速开始

步骤1:将插件添加到项目中

pubspec.yaml 文件中添加依赖:

dependencies:
  reflex: <最新版本>

运行 pub get 获取包。

步骤2:在 AndroidManifest.xml 中添加服务

<application> 标签内添加以下服务:

<service
    android:label="notifications"
    android:name="com.devsonflutter.reflex.notification.NotificationListener"
    android:permission="android.permission.BIND_NOTIFICATION_LISTENER_SERVICE">
    <intent-filter>
        <action android:name="android.service.notification.NotificationListenerService" />
    </intent-filter>
</service>

对于Android 12及以上版本,添加 android:exported="true" 字段以使其兼容:

<service
    android:label="notifications"
    android:name="com.devsonflutter.reflex.notification.NotificationListener"
    android:permission="android.permission.BIND_NOTIFICATION_LISTENER_SERVICE"
    android:exported="true">
    <intent-filter>
        <action android:name="android.service.notification.NotificationListenerService" />
    </intent-filter>
</service>

步骤3:实例化Reflex

只允许实例化一次:

Reflex reflex = Reflex();

示例

前往 pub.dev 的示例部分查看完整的示例代码。

在GitHub中,前往 example/lib/main.dart 查看完整的示例代码。

导入

单个导入即可使用reflex:

import 'package:reflex/reflex.dart';

监听与回复

StreamSubscription<ReflexEvent>? _subscription;
final List<ReflexEvent> _notificationLogs = [];
final List<ReflexEvent> _autoReplyLogs = [];
bool isListening = false;

Reflex reflex = Reflex(
  debug: true,
  packageNameList: ["com.whatsapp", "com.tyup"],
  packageNameExceptionList: ["com.facebook"],
  autoReply: AutoReply(
    packageNameList: ["com.whatsapp"],
    message: "[Reflex] 这是一个自动回复。",
  ),
);

@override
void initState() {
  super.initState();
  initPlatformState();
}

Future<void> initPlatformState() async {
  startListening();
}

void onData(ReflexEvent event) {
  setState(() {
    if (event.type == ReflexEventType.notification) {
      _notificationLogs.add(event);
    } else if (event.type == ReflexEventType.reply) {
      _autoReplyLogs.add(event);
    }
  });
  debugPrint(event.toString());
}

void startListening() {
  try {
    _subscription = reflex.notificationStream!.listen(onData);
    setState(() {
      isListening = true;
    });
  } on ReflexException catch (exception) {
    debugPrint(exception.toString());
  }
}

void stopListening() {
  _subscription?.cancel();
  setState(() => isListening = false);
}

快速指南

调试

调试允许你调试插件的功能,日志会显示在控制台。

默认情况下调试日志已启用。你可以通过在 Reflex 类中使用 debug 字段进行配置:

Reflex reflex = Reflex(
  debug: false,
);

监听通知权限

检查是否已经授予了监听通知的权限:

bool isPermissionGranted = await Reflex.isPermissionGranted;

请求监听通知权限

使用该函数来请求监听通知的权限:

await Reflex.requestPermission();

通知流

使用 reflex 对象获取通知流,以便在Flutter应用中监听通知:

StreamSubscription<ReflexEvent>? _subscription;
_subscription = reflex.notificationStream!.listen((event) {
  // 应用逻辑
});

该流会在收到通知时订阅 ReflexEvent

Reflex事件

传入的 ReflexEvent 包含以下信息:

  • 类型:当收到通知时为 ReflexEventType.notification,当发送自动回复时为 ReflexEventType.reply
  • 包名:接收通知的应用程序的包名。
  • 标题:通知标题。
  • 消息:包含在通知中的消息及发送回复时的消息。
  • 时间戳:通知接收和回复发送的时间戳。

监听特定应用的通知

指定要监听通知的应用程序列表:

如果 packageNameList: null,插件将监听所有包的通知。

Reflex reflex = Reflex(
  debug: true,
  packageNameList: ["com.whatsapp", "com.facebook"],
);

避免特定应用的通知

指定包名异常列表以避免监听某些应用程序的通知:

如果 packageNameExceptionList: null,插件将监听 packageNameList(如果不为空)的通知。

Reflex reflex = Reflex(
  debug: true,
  packageNameExceptionList: ["com.whatsapp"],
);

自动回复

在监听通知时发送自动回复:

AutoReply autoReply = AutoReply(
  message: "[Reflex] 这是一个自动回复。",
),

特定应用的自动回复

AutoReply 中指定 packageNameList 以对特定应用进行自动回复:

AutoReply autoReply = AutoReply(
  packageNameList: ["com.whatsapp"],
  message: "[Reflex] 这是一个自动回复。",
),

AutoReply 对象由 ReflexautoReply 字段用于自动回复应用程序。

Reflex reflex = Reflex(
  debug: true,
  packageNameList: ["com.whatsapp", "com.tyup"],
  packageNameExceptionList: ["com.miui.securitycenter"],
  autoReply: AutoReply(
    packageNameList: ["com.whatsapp"],
    message: "[Reflex] 这是一个自动回复。",
  ),
);

更多关于Flutter动画与交互插件reflex的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画与交互插件reflex的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于在Flutter中使用Reflex进行动画与交互,这里有一个简单的代码示例来展示其基本用法。Reflex是一个强大的Flutter包,它允许开发者通过声明式API轻松创建复杂的动画和交互。

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

dependencies:
  flutter:
    sdk: flutter
  reflex: ^latest_version  # 请替换为最新的版本号

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

以下是一个简单的示例,展示了如何使用Reflex来创建一个点击按钮时产生缩放动画的效果:

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

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

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

class ReflexAnimationExample extends StatefulWidget {
  @override
  _ReflexAnimationExampleState createState() => _ReflexAnimationExampleState();
}

class _ReflexAnimationExampleState extends State<ReflexAnimationExample> with SingleTickerProviderStateMixin {
  ReflexController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ReflexController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Reflex(
      controller: _controller,
      child: Center(
        child: ReflexAnimatable(
          key: UniqueKey(), // 确保每次重建时有唯一的Key
          animations: {
            ReflexAction.tap: ReflexActionData(
              actions: [
                ReflexActionItem(
                  animation: ReflexTween(
                    begin: 1.0,
                    end: 1.2,
                    duration: Duration(milliseconds: 300),
                    curve: Curves.easeInOut,
                  ),
                  property: ReflexProperty.scale,
                ),
                ReflexActionItem(
                  animation: ReflexTween(
                    begin: 1.2,
                    end: 1.0,
                    duration: Duration(milliseconds: 300),
                    curve: Curves.easeInOut,
                    delay: Duration(milliseconds: 300), // 动画结束后恢复原状
                  ),
                  property: ReflexProperty.scale,
                ),
              ],
            ),
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Tap Me',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 创建了一个ReflexController来控制动画。
  2. 使用Reflex包裹整个动画区域。
  3. 使用ReflexAnimatable来定义可动画化的子组件,并为其设置动画属性。
  4. animations属性中定义了点击(ReflexAction.tap)时要执行的动画,这里我们定义了一个缩放动画,点击时放大到1.2倍,然后300毫秒后恢复原始大小。

这个示例只是一个起点,Reflex支持多种动画属性和复杂的交互逻辑,你可以根据需求进一步探索和自定义动画效果。

回到顶部