Flutter指针事件拦截插件 pointer_interceptor_web 的使用

pointer_interceptor_web 是 pointer_interceptor 插件的Web实现。这个插件允许你在Flutter Web应用中拦截或忽略特定区域的指针事件（如点击、触摸等），从而避免这些事件穿透到下面的HTML元素或其他Flutter组件。

使用方法

该插件是官方认可的联邦插件之一，这意味着你可以在项目中直接使用 pointer_interceptor 而无需显式地将其添加到 pubspec.yaml 文件中。不过，如果你需要直接调用此包中的API，则应将它添加到你的 pubspec.yaml 文件中。

示例代码

以下是一个完整的示例demo，展示了如何在Flutter Web应用中使用 pointer_interceptor_web 来处理不同的交互场景：

import 'dart:ui_web' as ui_web;
import 'package:flutter/material.dart';
import 'package:pointer_interceptor_platform_interface/pointer_interceptor_platform_interface.dart';
import 'package:pointer_interceptor_web/pointer_interceptor_web.dart';

const String _htmlElementViewType = '_htmlElementViewType';
const double _containerWidth = 640;
const double _containerHeight = 480;

final web.Element _htmlElement =
    (web.document.createElement('div') as web.HTMLDivElement)
      ..style.width = '100%'
      ..style.height = '100%'
      ..style.backgroundColor = '#fabada'
      ..style.cursor = 'auto'
      ..id = 'background-html-view';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Stopping Clicks with PointerInterceptor',
      home: MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _lastClick = 'none';

  void _clickedOn(String key) {
    setState(() {
      _lastClick = key;
    });
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    ui_web.platformViewRegistry.registerViewFactory(
      _htmlElementViewType,
      (int viewId) => _htmlElement,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PointerInterceptor demo'),
        actions: <Widget>[
          PointerInterceptorPlatform.instance.buildWidget(
            child: IconButton(
              icon: const Icon(Icons.add_alert),
              tooltip: 'AppBar Icon',
              onPressed: () {
                _clickedOn('appbar-icon');
              },
            ),
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Last click on: $_lastClick',
              key: const Key('last-clicked'),
            ),
            Container(
              color: Colors.black,
              width: _containerWidth,
              height: _containerHeight,
              child: Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  HtmlElement(
                    onClick: () {
                      _clickedOn('html-element');
                    },
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      ElevatedButton(
                        key: const Key('transparent-button'),
                        child: const Text('Never calls onPressed'),
                        onPressed: () {
                          _clickedOn('transparent-button');
                        },
                      ),
                      PointerInterceptorWeb().buildWidget(
                          intercepting: false,
                          child: ElevatedButton(
                            key: const Key('wrapped-transparent-button'),
                            child: const Text('Never calls onPressed transparent'),
                            onPressed: () {
                              _clickedOn('wrapped-transparent-button');
                            },
                          )),
                      PointerInterceptorPlatform.instance.buildWidget(
                        child: ElevatedButton(
                          key: const Key('clickable-button'),
                          child: const Text('Works As Expected'),
                          onPressed: () {
                            _clickedOn('clickable-button');
                          },
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          PointerInterceptorPlatform.instance.buildWidget(
            child: FloatingActionButton(
              child: const Icon(Icons.navigation),
              onPressed: () {
                _clickedOn('fab-1');
              },
            ),
          ),
        ],
      ),
      drawer: Drawer(
        child: PointerInterceptorPlatform.instance.buildWidget(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ListTile(
                title: const Text('Item 1'),
                onTap: () {
                  _clickedOn('drawer-item-1');
                },
              ),
              ListTile(
                title: const Text('Item 2'),
                onTap: () {
                  _clickedOn('drawer-item-2');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class HtmlElement extends StatelessWidget {
  const HtmlElement({super.key, required this.onClick});

  final VoidCallback onClick;

  [@override](/user/override)
  Widget build(BuildContext context) {
    _htmlElement.addEventListener(
      'click',
      (JSAny? _) {
        onClick();
      }.toJS,
    );

    return const HtmlElementView(
      viewType: _htmlElementViewType,
    );
  }
}