Flutter触控交互控制插件flutter_touch_interaction_controller的使用
Flutter触控交互控制插件flutter_touch_interaction_controller的使用
简介
- 描述:一个用于检测和处理屏幕触摸事件的Flutter插件。
- 技术栈:Flutter插件。
- 状态:CHANGELOG。
主要功能
- 单点触控事件识别和流提供。
- 请求无障碍服务权限。
- 验证无障碍服务权限。
- 执行单点触控操作。
- 执行滑动操作。
示例截图
安装
添加依赖
在你的pubspec.yaml
文件中添加以下依赖:
dependencies:
flutter_touch_interaction_controller: ^1.1.0
修改Android设置
1. 在android/app/src/main/AndroidManifest.xml
文件中添加以下代码:
<service
android:name="com.rabbitson87.flutter_touch_interaction_controller.AccessibilityServicePlugin"
android:exported="true"
android:permission="android.permission.BIND_ACCESSIBILITY_SERVICE">
<intent-filter>
<action android:name="android.accessibilityservice.AccessibilityService" />
</intent-filter>
<meta-data
android:name="android.accessibilityservice"
android:resource="@xml/accessibility_service_config" />
</service>
2. 创建android/app/src/main/res/xml/accessibility_service_config.xml
文件并添加以下代码:
<accessibility-service xmlns:android="http://schemas.android.com/apk/res/android"
android:accessibilityEventTypes="typeAllMask"
android:accessibilityFeedbackType="feedbackSpoken"
android:accessibilityFlags="flagDefault"
android:canPerformGestures="true"
android:canRequestTouchExplorationMode="true"
android:notificationTimeout="100" />
使用
检查无障碍权限是否启用
bool isAccessibilityPermissionEnabled = await FlutterTouchInteractionController.isAccessibilityPermissionEnabled;
请求无障碍权限
await FlutterTouchInteractionController.requestAccessibilityPermission;
监听触摸事件
final accessStream = FlutterTouchInteractionController.accessStream.listen((event) {
print(event);
});
移除监听器
accessStream.cancel();
执行触摸操作
await FlutterTouchInteractionController.touch(Point(x: 350, y: 400));
执行滑动操作
await FlutterTouchInteractionController.swipe(Point(x: 350, y: 1400), Point(x: 350, y: 1000));
获取帮助
如果你有任何问题、疑虑或错误报告,请在这个仓库的Issue Tracker中提交问题。
参与贡献
如何贡献的具体说明可以查看 CONTRIBUTING.md。
开源许可信息
致谢
示例代码
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_touch_interaction_controller/flutter_touch_interaction_controller.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> {
bool _isAccessibilityPermissionEnabled = false;
StreamSubscription<MotionEvent>? _subscription;
List<MotionEvent?> events = [];
[@override](/user/override)
void initState() {
super.initState();
}
Future<void> _isAccessibilityPermissionEnabledState() async {
bool isAccessibilityPermissionEnabled;
try {
isAccessibilityPermissionEnabled = await FlutterTouchInteractionController
.isAccessibilityPermissionEnabled;
} on PlatformException {
isAccessibilityPermissionEnabled = false;
}
if (!mounted) return;
setState(() {
_isAccessibilityPermissionEnabled = isAccessibilityPermissionEnabled;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('FlutterTouchInteractionController example'),
),
body: Center(
child: Column(children: [
ElevatedButton(
onPressed: () async {
final result = await FlutterTouchInteractionController
.requestAccessibilityPermission();
print("requestAccessibilityPermission: $result");
},
child: const Text('请求无障碍权限'),
),
ElevatedButton(
onPressed: _isAccessibilityPermissionEnabledState,
child: const Text('检查无障碍权限是否启用'),
),
Text(
'无障碍权限已启用: $_isAccessibilityPermissionEnabled'),
ElevatedButton(
onPressed: () {
if (_subscription == null) {
setState(() {
_subscription = FlutterTouchInteractionController
.accessStream
.listen((event) {
print("$event");
setState(() {
events.add(event);
});
});
});
} else {
_subscription?.cancel();
_subscription = null;
setState(() {
events = [];
});
}
},
child: Text(
_subscription == null ? '开始监听' : '停止监听'),
),
ElevatedButton(
onPressed: () async {
final touchResult = await FlutterTouchInteractionController.touch(
Point(x: 350, y: 400));
print("touchResult: $touchResult");
},
child: const Text('点击'),
),
ElevatedButton(
onPressed: () async {
final touchResult = await FlutterTouchInteractionController.swipe(
Point(x: 350, y: 1400), Point(x: 350, y: 1000));
print("SwipeResult: $touchResult");
},
child: const Text('滑动'),
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: events.length,
itemBuilder: (_, index) => ListTile(
title: Text(events[index]?.toString() ?? ''),
),
),
),
]),
),
),
);
}
}
更多关于Flutter触控交互控制插件flutter_touch_interaction_controller的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter触控交互控制插件flutter_touch_interaction_controller的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何使用 flutter_touch_interaction_controller
插件的基本示例代码。请注意,这个插件的具体实现和API可能会随着版本更新而变化,因此以下代码仅作为示例,并假设你已经按照插件的官方文档完成了必要的配置和安装。
首先,确保你的 pubspec.yaml
文件中已经包含了 flutter_touch_interaction_controller
插件的依赖:
dependencies:
flutter:
sdk: flutter
flutter_touch_interaction_controller: ^最新版本号
然后,运行 flutter pub get
来获取依赖。
接下来,在你的 Flutter 项目中,你可以按照以下方式使用 flutter_touch_interaction_controller
插件来处理触控交互。
示例代码
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_touch_interaction_controller/flutter_touch_interaction_controller.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Touch Interaction Controller Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
late FlutterTouchInteractionController _controller;
@override
void initState() {
super.initState();
_controller = FlutterTouchInteractionController();
_controller.addListener(() {
// 当触控交互发生变化时,这里会收到通知
setState(() {});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Touch Interaction Controller Demo'),
),
body: Center(
child: Stack(
children: [
// 背景内容
Container(
color: Colors.grey[200],
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
// 触控区域
GestureDetector(
onPanUpdate: (details) {
_controller.updatePosition(details.globalPosition);
},
child: Container(
color: Colors.transparent,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
),
// 显示触控位置
if (_controller.position != null)
Positioned(
left: _controller.position!.dx - 20,
top: _controller.position!.dy - 20,
child: Material(
elevation: 5.0,
child: CircleAvatar(
backgroundColor: Colors.blue,
radius: 20.0,
child: Icon(
Icons.location_on,
color: Colors.white,
size: 30.0,
),
),
),
),
],
),
),
);
}
}
extension on FlutterTouchInteractionController {
Offset? get position => _lastPosition;
set position(Offset? value) {
_lastPosition = value;
notifyListeners();
}
late Offset? _lastPosition = null;
void updatePosition(Offset newPosition) {
position = newPosition;
}
}
解释
-
引入依赖:首先,在
main.dart
中引入flutter_touch_interaction_controller
插件。 -
初始化控制器:在
MyHomePage
的initState
方法中初始化FlutterTouchInteractionController
控制器,并添加一个监听器,当触控位置变化时,会调用setState
方法更新界面。 -
处理触控事件:在
GestureDetector
的onPanUpdate
回调中,使用_controller.updatePosition
方法更新触控位置。 -
显示触控位置:通过检查
_controller.position
是否为空,来决定是否显示一个表示触控位置的圆形图标。 -
扩展方法:为了方便,我们对
FlutterTouchInteractionController
进行了一个简单的扩展,添加了position
属性和updatePosition
方法。
请注意,上述代码是一个简单的示例,旨在展示如何使用 flutter_touch_interaction_controller
插件来处理触控交互。根据你的具体需求,你可能需要对代码进行进一步的调整和优化。