Flutter延迟指针事件处理插件defer_pointer的使用

defer_pointer 插件为Flutter提供了一种替代 Overlay 的方法，允许你轻松地渲染和命中测试超出其父组件边界的组件。它基于 这里 提出的原始想法。

通常情况下，在Flutter中，如果你将一个组件偏移出其父组件的边界，命中测试将会失效。DeferPointer 通过将命中测试（以及可选的渲染）交给树中更上层的 DeferredPointerHandler 组件来解决这个问题。

虽然 Overlay 在某种程度上可以解决这个问题，但使用 DeferPointer 提供了一些优势：

• 直接可用：无需繁琐且容易出错的层级管理
• 更精细：你可以设置边界为任何你选择的祖先组件
• 更灵活：你可以选择是否在顶层绘制子组件
• 更容易对齐/固定到树中的组件，因为这是默认预期

这对于较大的UI组件如下拉菜单和滑动面板，以及一些小的样式调整非常有用。

🔨 安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  defer_pointer: ^0.0.2

⚙ 导入

在Dart文件中导入包：

import 'package:defer_pointer/defer_pointer.dart';

🕹️ 使用

基本用法

1. 在你希望进行命中测试的按钮上方包裹一个 DeferredPointerHandler。
2. 在按钮本身周围包裹 DeferPointer。

例如：

Widget build(BuildContext context) {
    return DeferredPointerHandler(
       child: SizedBox(
           width: 100,
           height: 100,
           child: Stack(clipBehavior: Clip.none, children: [
             // 挂载按钮在内容下方
             Positioned(
               bottom: -30,
               child: DeferPointer(child: _SomeBtn(false)),
             ),
             // 内容
             Positioned.fill(
               child: Container(
                 decoration: BoxDecoration(color: Colors.green, boxShadow: [
                   BoxShadow(color: Colors.black.withOpacity(1), blurRadius: 4, spreadRadius: 4),
                 ]),
               ),
             ),
           ]))));
  }

如果需要子组件在其兄弟组件之上绘制，可以启用 paintOnTop 属性。这将把绘制任务推迟给当前链接的 DeferredPointerHandler。

return DeferPointer(
    paintOnTop: true,
    child: TextButton(...));

示例代码

以下是一个完整的示例，展示了如何使用 defer_pointer 来创建一个简单的应用，该应用包含多个页面，每个页面演示了不同的功能。

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late TabController tabs;
  List<Widget Function()> tabBuilders = [
    () => const SimpleOffsetExample(),
    () => const DropdownMenusExample(),
    () => const FlowMenuExample(),
    () => const AutoCompleteExample(),
  ];

  @override
  void initState() {
    tabs = TabController(length: tabBuilders.length, vsync: this);
    tabs.addListener(() => setState(() {}));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final pages = tabBuilders.map((e) => e.call()).toList();
    return MaterialApp(
      home: Scaffold(
        body: Column(children: [
          Expanded(
            child: TabBarView(controller: tabs, children: pages),
          ),
          TabBar(
            controller: tabs,
            tabs: [
              TextButton(onPressed: () => tabs.index = 0, child: const Text('Offset Buttons')),
              TextButton(onPressed: () => tabs.index = 1, child: const Text('Dropdown Menu')),
              TextButton(onPressed: () => tabs.index = 2, child: const Text('Flow Menu')),
              TextButton(onPressed: () => tabs.index = 3, child: const Text('Auto Complete')),
            ],
          ),
        ]),
      ),
    );
  }
}

// 示例页面类定义（此处仅展示框架）
class SimpleOffsetExample extends StatelessWidget {
  const SimpleOffsetExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: DeferredPointerHandler(
        child: SizedBox(
          width: 100,
          height: 100,
          child: Stack(clipBehavior: Clip.none, children: [
            Positioned(
              bottom: -30,
              child: DeferPointer(child: ElevatedButton(onPressed: () {}, child: Text('Button'))),
            ),
            Positioned.fill(
              child: Container(
                decoration: BoxDecoration(color: Colors.green, boxShadow: [
                  BoxShadow(color: Colors.black.withOpacity(1), blurRadius: 4, spreadRadius: 4),
                ]),
              ),
            ),
          ]),
        ),
      ),
    );
  }
}

// 其他页面类定义类似...

此代码创建了一个带有四个标签页的应用程序，每个标签页演示了 defer_pointer 插件的不同功能。你可以根据需要扩展这些页面的具体实现。

手动链接

对于更复杂的情况，你可以手动分配链接以绑定指针到处理器：

final _deferredPointerLink = DeferredPointerHandlerLink();

...

Widget build(){
    return DeferredPointerHandler(
      link: _deferredPointerLink,
      child: Padding(
          padding: const EdgeInsets.all(20),
          child: DeferPointer(
            link: _deferredPointerLink,
            child: ...,
          )),
    );
}

🐛 Bugs/Requests

如果你遇到任何问题，请在GitHub上提交问题。如果你认为库缺少某些功能，也请在GitHub上提出请求。欢迎提交Pull Request。

📃 License

MIT License