Flutter触摸显示插件show_touches的使用

Flutter触摸显示插件show_touches的使用

目录 🪄

功能 ✨

  • 👇 多个手指（指针）
  • 🔧 控制器控制
  • ⚙️ 可自定义的指针小部件和动画

安装 🎯

版本兼容性 🐦

Flutter 3.3.0+
show_touches 0.0.1+ ✅

平台兼容性 📱

Android iOS Web macOS Windows Linux
✅ ✅ ✅ ✅ ✅ ✅

添加包 📦

运行以下命令：

$ flutter pub add show_touches

或者在 pubspec.yaml 文件中手动添加：

dependencies:
  show_touches: ^latest_version

简单使用 📖

示例：show_touches/example

ShowTouches 📦

ShowTouches 小部件将具有默认的手势逻辑和指针小部件。

// 导入show_touches
import 'package:show_touches/show_touches.dart';

MaterialApp(
  builder: ShowTouches.init(),
  home: XxxPage(),
);

// 或者

ShowTouches(child: XxxPage()),

使用 📖

ShowTouches 小部件参数 🤖

参数 类型 默认值 描述
child Widget - 必须参数
enable bool true 启用或禁用
controller ShowTouchesController? null 控制指针的控制器
pointerBuilder PointerBuilder? null 自定义指针小部件，但会导致 defaultPointerStyle 无效
defaultPointerStyle DefaultPointerStyle DefaultPointerStyle() 当未使用 pointerBuilder 时的默认指针样式
showDuration Duration Duration(milliseconds: 50) 显示动画持续时间（指针）
removeDuration Duration Duration(milliseconds: 200) 移除动画持续时间（指针）

PointerBuilder 📄

示例：

ShowTouches(
  pointerBuilder: (
    BuildContext context,
    int pointerId,
    Offset position,
    Animation<double> animation,
  ) {
    final Animation<double> scaleAnimation = Tween<double>(
      begin: 2.0,
      end: 1.0,
    ).animate(animation);

    return Positioned(
      left: position.dx - 30.0,
      top: position.dy - 30.0,
      child: IgnorePointer(
        ignoring: true,
        child: ScaleTransition(
          scale: scaleAnimation,
          child: FadeTransition(
            opacity: animation,
            child: Container(
              width: 60,
              height: 60,
              color: Colors.black,
            ),
          ),
        ),
      ),
    );
  },
  child: XxxPage(),
),
参数 类型 描述
context BuildContext -
pointerId int 指针（触控）ID
position Offset 当前触控位置
animation Animation<double> 动画控制器

ShowTouchesController 📄

您可以使用控制器来控制 ShowTouches 小部件中的指针，或者实现自己的手势逻辑来控制指针。

示例：

final ShowTouchesController controller = ShowTouchesController();

......

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

......

Listener(
  onPointerDown: (event) => controller.addPointer(...),
  onPointerMove: (event) => controller.updatePointer(...),
  onPointerUp: (event) => controller.removePointer(...),
  onPointerCancel: (event) => controller.removePointer(...),
  behavior: HitTestBehavior.translucent,
  child: child,
);

获取所有指针数据

通过 controller.data 获取所有指针数据 (Map<int, PointerData>)。

Map<int, PointerData> -> key: pointerId, value: PointerData

更多关于Flutter触摸显示插件show_touches的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter触摸显示插件show_touches的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，show_touches 是一个用于在屏幕上显示触摸点（触摸轨迹）的插件。这对于调试触摸事件或创建需要显示触摸反馈的应用非常有用。以下是如何在Flutter项目中使用 show_touches 插件的代码示例。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 show_touches 依赖：

dependencies:
  flutter:
    sdk: flutter
  show_touches: ^x.y.z  # 替换为最新版本号

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中（通常是 main.dart），导入 show_touches 插件：

import 'package:show_touches/show_touches.dart';

3. 使用插件

你可以通过 ShowTouchesWrapper 包裹你的根组件来启用触摸显示功能。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ShowTouchesWrapper(
        // 你可以在这里配置 ShowTouchesWrapper 的其他属性
        // 比如 color, strokeWidth 等
        builder: (context) => MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Show Touches Example'),
      ),
      body: Center(
        child: Text(
          'Touch the screen to see touches!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

4. 自定义配置（可选）

ShowTouchesWrapper 提供了多个配置选项，允许你自定义触摸点的显示方式。例如，你可以设置触摸点的颜色、线条宽度、最大触摸点数量等。以下是一个带有自定义配置的示例：

ShowTouchesWrapper(
  color: Colors.red,          // 设置触摸点颜色
  strokeWidth: 4.0,           // 设置线条宽度
  maxTouches: 10,             // 设置最大触摸点数量
  showTouches: true,          // 是否显示触摸点（默认是 true）
  showTouchesOnEveryFrame: true, // 是否在每一帧都显示触摸点（默认是 true）
  builder: (context) => MyHomePage(),
)

5. 运行应用

现在，你可以运行你的 Flutter 应用，并在屏幕上触摸以查看触摸点显示。

这个插件非常适合在开发阶段用于调试触摸事件，帮助开发者更好地理解用户的交互行为。希望这个示例能帮你顺利地在 Flutter 项目中使用 show_touches 插件！

回到顶部