Flutter手势识别插件gesturedeck_flutter的使用

Flutter手势识别插件Gesturedeck Flutter的使用

Gesturedeck Flutter

gesturedeck_flutter版本

概述

通过Gesturedeck的非凡力量革新您的应用程序用户体验！无缝集成到您的应用中，Gesturedeck使用户能够通过直观的触摸手势轻松控制他们的设备，而无需查看屏幕。

   

想象一下，通过添加调整音量、跳过曲目等能力来增强您的应用，使交互更加流畅和自然。无论是驾驶、骑自行车还是参与任何需要全神贯注的活动，Gesturedeck都能确保无缝体验，提高生产力和安全性。

Gesturedeck Flutter插件支持Android和iOS平台。

关键特性

  • 直观的触摸手势实现无缝设备控制。
  • 可定制的手势动作以增强用户体验。
  • 集成GesturedeckMedia以支持媒体应用控制和覆盖UI。
  • 使用GesturedeckMedia支持音量按钮操作。
  • 敏感度设置用于微调手势响应。
  • 不需要互联网连接。

开始使用

初始化Gesturedeck

将Gesturedeck集成到Flutter应用中只需几个步骤：

  1. 初始化Gesturedeck:
await Gesturedeck.initialize(
    tapAction: () {}, // 点击手势动作
    swipeLeftAction: () {}, // 向左滑动手势动作
    swipeRightAction: () {}, // 向右滑动手势动作
    panAction: () {}, // 平移手势动作
);

// 或者在初始化后设置手势动作
Gesturedeck.tapAction = () {}
  1. 启动和停止Gesturedeck检测:
Gesturedeck.start(); // 启动Gesturedeck
Gesturedeck.stop(); // 停止Gesturedeck

要禁用某个手势动作，在初始化Gesturedeck时将其对应的参数设为null:

await Gesturedeck.initialize(
    tapAction: null, // 禁用点击手势
);

或者在Gesturedeck初始化之后，将对应的属性设为null:

Gesturedeck.tapAction = null; // 禁用点击手势
初始化GesturedeckMedia

使用GesturedeckMedia增强媒体应用控制：

  1. 初始化GesturedeckMedia并自定义覆盖UI:
await GesturedeckMedia.initialize(
    tapAction: () {}, // 点击手势动作
    swipeLeftAction: () {}, // 向左滑动手势动作
    swipeRightAction: () {}, // 向右滑动手势动作
    panAction: () {}, // 平移手势动作
    gesturedeckMediaOverlay: GesturedeckMediaOverlay(
        topIcon: icon, // 顶部图标
        iconSwipeLeft: ..., // 左滑图标
        iconSwipeRight: ..., // 右滑图标
        iconTap: ..., // 点击图标
        iconTapToggled: ..., // 点击切换图标
    ),
);
  1. 启动和停止GesturedeckMedia检测:
GesturedeckMedia.start(); // 启动GesturedeckMedia
GesturedeckMedia.stop(); // 停止GesturedeckMedia
  1. 自定义反向水平滑动:
GesturedeckMedia.reverseHorizontalSwipes = true; // 允许反向水平滑动

要在Android中按下音量按钮时显示GesturedeckMedia UI，请将class MainActivity : FlutterActivity() 替换为 class MainActivity : GesturedeckFlutterActivity()。

iOS专属

如果您使用默认手势动作，则需要在项目的Info选项卡中添加NSAppleMusicUsageDescription键，并提供一个解释为什么需要此权限的值（例如 "Control music playback"）。

API参考

您可以在这里找到API参考：API文档。

免费使用

Gesturedeck SDK免费供个人和商业项目使用，功能齐全且无时间限制。但是，使用免费版时，运行时会显示水印。严格禁止隐藏、移除或修改Gesturedeck SDK免费版的水印。

激活密钥和移除水印

要从您的应用中移除水印，可以通过购买激活密钥获得无水印版本的Gesturedeck SDK。

您需要为每个平台设置不同的激活密钥。

如需购买激活密钥或有关许可和使用的其他问题，请联系我们：team@navideck.com。我们随时为您提供帮助和支持。

联系方式

如有任何疑问、问题或需要支持，请随时联系我们的团队：team@navideck.com。感谢您选择Gesturedeck Flutter插件！

示例代码

// 忽略打印警告，忽略未使用的局部变量

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gesturedeck_flutter_example/home.dart';

const primaryColor = Color(0xFFF5977F);

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light().copyWith(
        brightness: Brightness.light,
        primaryColor: primaryColor,
        appBarTheme: AppBarTheme(
          backgroundColor: primaryColor,
          surfaceTintColor: Platform.isIOS ? Colors.transparent : null,
          shadowColor:
              Platform.isIOS ? CupertinoColors.darkBackgroundGray : null,
          scrolledUnderElevation: Platform.isIOS ? .1 : null,
        ),
        colorScheme: const ColorScheme.light(primary: primaryColor),
        useMaterial3: true,
      ),
      home: const Home(),
    ),
  );
}

更多关于Flutter手势识别插件gesturedeck_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter手势识别插件gesturedeck_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用gesturedeck_flutter插件来进行手势识别的示例代码。gesturedeck_flutter是一个第三方库，用于在Flutter应用中识别和响应用户的手势。

首先，确保你已经在pubspec.yaml文件中添加了gesturedeck_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  gesturedeck_flutter: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤使用gesturedeck_flutter：

  1. 导入包：
import 'package:flutter/material.dart';
import 'package:gesturedeck_flutter/gesturedeck_flutter.dart';
  1. 创建GestureDeckController：

在你的StatefulWidget的State类中，创建一个GestureDeckController实例。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  GestureDeckController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = GestureDeckController();
    _controller!.onGestureRecognized = (Gesture gesture) {
      // 处理识别到的手势
      print('Recognized gesture: ${gesture.name}');
    };
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GestureDeck Flutter Example'),
        ),
        body: GestureDeck(
          controller: _controller!,
          child: Center(
            child: Text('Swipe or tap the screen'),
          ),
        ),
      ),
    );
  }
}
  1. 运行应用：

现在，当你运行你的Flutter应用时，你应该能够在屏幕上看到文本提示你进行手势操作。当你执行手势（如滑动或点击）时，控制台将打印出识别到的手势名称。

注意事项

  • 确保你已经正确设置了Android和iOS的权限（如果需要的话），因为某些手势识别可能需要访问设备的传感器。
  • GestureDeckController提供了多种配置选项，允许你自定义手势识别的灵敏度和识别的手势类型。你可以查阅gesturedeck_flutter的官方文档来了解更多详细信息。

这个示例代码展示了如何在Flutter应用中使用gesturedeck_flutter插件进行基本的手势识别。根据实际需求，你可以进一步自定义和扩展这个示例。

回到顶部