Flutter透明指针操作插件transparent_pointer的使用

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

Flutter透明指针操作插件transparent_pointer的使用

transparent_pointer 是一个Flutter插件，它允许其子树接收指针事件，但对父级来说是不可见的。这意味着即使某个手势检测器在视觉上位于另一个小部件后面，它仍然可以接收指针事件，同时允许该其他小部件也接收到这些事件。

示例

在这个示例中，拖动可以在小部件的任何地方开始，包括文本按钮上方，即使按钮在视觉上位于背景手势检测器前面。同时，按钮仍然是可点击的。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Transparent Pointer Example'),
        ),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        GestureDetector(
          behavior: HitTestBehavior.opaque,
          onVerticalDragStart: (_) => print("Background drag started"),
        ),
        Positioned(
          top: 60,
          left: 60,
          height: 60,
          width: 60,
          child: TransparentPointer(
            child: TextButton(
              child: Text("Tap me"),
              onPressed: () => print("You tapped me"),
            ),
          ),
        ),
      ],
    );
  }
}

解释

  1. Stack: Stack 小部件用于堆叠多个子小部件。在这个例子中，我们有两个子小部件：一个 GestureDetector 和一个 Positioned 小部件。
  2. GestureDetector: 这个小部件用于检测手势。我们设置 behavior 为 HitTestBehavior.opaque，这意味着它会捕获所有指针事件，即使它在视觉上被其他小部件覆盖。
  3. Positioned: 这个小部件用于在 Stack 中定位子小部件。我们将其定位在 (60, 60) 位置，并设置宽度和高度为 60。
  4. TransparentPointer: 这个小部件使它的子树对父级来说是透明的，但仍然可以接收指针事件。我们将 TextButton 包装在这个小部件中。
  5. TextButton: 这是一个简单的按钮，当点击时会打印一条消息。

通过这种方式，我们可以实现一个复杂的交互效果，其中背景的小部件和前景的小部件都可以独立地响应指针事件。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter中使用transparent_pointer插件的一个示例。这个插件允许你创建透明的指针事件，这在一些需要处理触摸事件但不显示任何UI元素的情况下非常有用。

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

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

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

接下来，这里是一个简单的示例，展示如何使用TransparentPointer来监听触摸事件而不显示任何UI：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Transparent Pointer Example'),
        ),
        body: Center(
          child: TransparentPointerWidget(),
        ),
      ),
    );
  }
}

class TransparentPointerWidget extends StatefulWidget {
  @override
  _TransparentPointerWidgetState createState() => _TransparentPointerWidgetState();
}

class _TransparentPointerWidgetState extends State<TransparentPointerWidget> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 这里可以放置其他UI元素
        Container(
          color: Colors.grey[200],
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Center(
            child: Text(
              'Tap anywhere in this grey area',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
        // TransparentPointer 覆盖在其他UI元素之上，监听触摸事件
        Positioned.fill(
          child: TransparentPointer(
            onPointerDown: (PointerDownEvent event) {
              print('Pointer down at position: ${event.position}');
            },
            onPointerMove: (PointerMoveEvent event) {
              print('Pointer move at position: ${event.position}');
            },
            onPointerUp: (PointerUpEvent event) {
              print('Pointer up at position: ${event.position}');
            },
            onPointerCancel: (PointerCancelEvent event) {
              print('Pointer cancel at position: ${event.position}');
            },
          ),
        ),
      ],
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个灰色的Container，并且在它之上覆盖了一个TransparentPointer。TransparentPointer不会显示任何UI元素，但会监听所有的触摸事件，并在控制台中打印触摸事件的位置。

你可以根据需要修改这个示例，比如添加更多的触摸事件处理逻辑，或者将TransparentPointer与其他UI元素结合使用，以实现更复杂的功能。

回到顶部