Flutter指针管理插件pointer_manger的使用

Flutter指针管理插件pointer_manger的使用

描述

pointer_manger插件用于管理触摸指针的数量、类型、如何与你的小部件交互以及在何处进行交互。

如何出错？

假设你有以下设置，其中的数字可能表示一些非负量。

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _n = 0;

  [@override](/user/override)
  Widget build(BuildContext context) => Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      ElevatedButton(
        onPressed: _n <= 1 ? null : () => setState(() => _n = _n - 2), 
        child: const Text("-2"),
      ),
      ElevatedButton(
        onPressed: _n <= 0 ? null : () => setState(() => --_n), 
        child: const Text("-1"),
      ),
      Text(_n.toString()),
      ElevatedButton(
        onPressed: () => setState(() => ++_n), 
        child: const Text("+1"),
      ),
    ],
  );
}

然后用户可能会执行如下的操作：

  • 这将导致你得到一个不希望的负值。
  • 显然，你可以通过在修改值之前进行检查来解决这种情况，但这只是一个用例示例。

解决方案

最简单的解决方案是使用此插件。

  • 只需将两个按钮包装在PointerMangerWidget.withAll中，并将PointerGroupHandler作为Row的父级。
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _n = 0;

  [@override](/user/override)
  Widget build(BuildContext context) => PointerGroupHandler( // 包含所有子组件的组处理
    groupTag: "no-negative", // 组标签
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        PointerMangerWidget.withAll( // 管理所有指针的包装器
          // groupTag: "no-negative", // 你可以指定父组标签。
          child: ElevatedButton(
            onPressed: _n <= 1 ? null : () => setState(() => _n = _n - 2), 
            child: const Text("-2"),
          ),
        ),
        PointerMangerWidget.withAll( // 管理所有指针的包装器
          child: ElevatedButton(
            onPressed: _n <= 0 ? null : () => setState(() => --_n), 
            child: const Text("-1"),
          ),
        ),
        Text(_n.toString()),
        ElevatedButton(
          onPressed: () => setState(() => ++_n), 
          child: const Text("+1"),
        ),
      ],
    ),
  );
}

更多关于Flutter指针管理插件pointer_manger的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter指针管理插件pointer_manger的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


pointer_manger 是一个 Flutter 插件，用于管理和处理指针事件。它可以帮助你在复杂的 UI 场景中更好地处理多个指针事件，例如在拖拽、缩放或旋转等手势操作中。下面是如何使用 pointer_manger 插件的基本步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  pointer_manger: ^0.0.1  # 请确保使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 pointer_manger 插件：

import 'package:pointer_manger/pointer_manger.dart';

3. 使用 PointerManger

PointerManger 是一个 Widget，它可以包裹你需要处理指针事件的子部件。你可以通过 PointerManger 来监听和处理指针事件。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PointerManger Example'),
      ),
      body: Center(
        child: PointerManger(
          onPointerDown: (PointerDownEvent event) {
            print('Pointer down at ${event.position}');
          },
          onPointerMove: (PointerMoveEvent event) {
            print('Pointer moved to ${event.position}');
          },
          onPointerUp: (PointerUpEvent event) {
            print('Pointer up at ${event.position}');
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Touch me',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

4. 处理多个指针

PointerManger 可以处理多个指针事件。你可以通过 event.pointer 来区分不同的指针：

PointerManger(
  onPointerDown: (PointerDownEvent event) {
    print('Pointer ${event.pointer} down at ${event.position}');
  },
  onPointerMove: (PointerMoveEvent event) {
    print('Pointer ${event.pointer} moved to ${event.position}');
  },
  onPointerUp: (PointerUpEvent event) {
    print('Pointer ${event.pointer} up at ${event.position}');
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Center(
      child: Text(
        'Touch me',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  ),
)
回到顶部