Flutter触控交互控制插件flutter_touch_interaction_controller的使用

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

Flutter触控交互控制插件flutter_touch_interaction_controller的使用

简介

pub package
  • 描述:一个用于检测和处理屏幕触摸事件的Flutter插件。
  • 技术栈:Flutter插件。
  • 状态CHANGELOG

主要功能

  1. 单点触控事件识别和流提供。
  2. 请求无障碍服务权限。
  3. 验证无障碍服务权限。
  4. 执行单点触控操作。
  5. 执行滑动操作。

示例截图

示例截图

安装

添加依赖

在你的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


开源许可信息

  1. TERMS
  2. LICENSE

致谢

  1. flutter_accessibility_service
  2. do-touch

示例代码

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

1 回复

更多关于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;
  }
}

解释

  1. 引入依赖:首先,在 main.dart 中引入 flutter_touch_interaction_controller 插件。

  2. 初始化控制器:在 MyHomePageinitState 方法中初始化 FlutterTouchInteractionController 控制器,并添加一个监听器,当触控位置变化时,会调用 setState 方法更新界面。

  3. 处理触控事件:在 GestureDetectoronPanUpdate 回调中,使用 _controller.updatePosition 方法更新触控位置。

  4. 显示触控位置:通过检查 _controller.position 是否为空,来决定是否显示一个表示触控位置的圆形图标。

  5. 扩展方法:为了方便,我们对 FlutterTouchInteractionController 进行了一个简单的扩展,添加了 position 属性和 updatePosition 方法。

请注意,上述代码是一个简单的示例,旨在展示如何使用 flutter_touch_interaction_controller 插件来处理触控交互。根据你的具体需求,你可能需要对代码进行进一步的调整和优化。

回到顶部