Flutter增强点击区域检测插件 expand_hit_test 的使用

expand_hit_test 是一个用于扩展Flutter中点击区域检测的插件。它提供了几种默认的小部件，并且可以轻松定制。

使用方法

1. 基于 InkWell 扩展点击区域

ExpandInkWell(
    expandArea: const EdgeInsets.all(30),
    onTap: () {
        debugPrint("expand inkwell tap");
    },
    child: Container(color: Colors.red, height: 100, width: 100)
)

2. 基于 GestureDetector 扩展点击区域

ExpandGestureDetector(
    expandArea: const EdgeInsets.all(30),
    onTap: () {
        debugPrint("expand GestureDetector tap");
    },
    child: Container(color: Colors.red, height: 100, width: 100)
)

3. 自定义组件

ExpandHitTestWidget(
    expandArea: const EdgeInsets.all(30),
    child: CupertinoButton(
        padding: EdgeInsets.zero,
        child: Container(color: Colors.red, height: 100, width: 100), 
        onPressed: () {
            debugPrint("expand CupertinoButton tap");
        }
    )
)

4. 超出父级容器的点击区域

如果你需要超出父级容器的点击区域，可以使用 ExpandHitTestScope：

ExpandHitTestScope(child: xxxx)

示例 Demo

以下是一个完整的示例项目，展示了如何在应用中集成和使用 expand_hit_test 插件。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:expand_hit_test/expand_hit_test.dart';

void main() {
  // 显示调试区域
  ExpandHitTestConfigs.showDebugArea = true;
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Expand hit test example")),
      body: Column(
        children: [
          CupertinoButton(
            child: const Text("Example 1"),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (BuildContext context) => const Example1(),
              ));
            },
          ),
          CupertinoButton(
            child: const Text("Example 2"),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (BuildContext context) => const Example2(),
              ));
            },
          ),
          CupertinoButton(
            child: const Text("Example 3"),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (BuildContext context) => const Example3(),
              ));
            },
          ),
          CupertinoButton(
            child: const Text("Example 4"),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (BuildContext context) => const Example4(),
              ));
            },
          ),
        ],
      ),
    );
  }
}

// 示例页面1
class Example1 extends StatelessWidget {
  const Example1({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Example 1")),
      body: Center(
        child: ExpandInkWell(
          expandArea: const EdgeInsets.all(30),
          onTap: () {
            debugPrint("expand inkwell tap in Example 1");
          },
          child: Container(color: Colors.red, height: 100, width: 100),
        ),
      ),
    );
  }
}

// 示例页面2
class Example2 extends StatelessWidget {
  const Example2({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Example 2")),
      body: Center(
        child: ExpandGestureDetector(
          expandArea: const EdgeInsets.all(30),
          onTap: () {
            debugPrint("expand GestureDetector tap in Example 2");
          },
          child: Container(color: Colors.green, height: 100, width: 100),
        ),
      ),
    );
  }
}

// 示例页面3
class Example3 extends StatelessWidget {
  const Example3({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Example 3")),
      body: Center(
        child: ExpandHitTestWidget(
          expandArea: const EdgeInsets.all(30),
          child: CupertinoButton(
            padding: EdgeInsets.zero,
            child: Container(color: Colors.blue, height: 100, width: 100),
            onPressed: () {
              debugPrint("expand CupertinoButton tap in Example 3");
            },
          ),
        ),
      ),
    );
  }
}

// 示例页面4
class Example4 extends StatelessWidget {
  const Example4({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Example 4")),
      body: Center(
        child: ExpandHitTestScope(
          child: Container(
            color: Colors.yellow,
            height: 100,
            width: 100,
            child: GestureDetector(
              onTap: () {
                debugPrint("tap within expanded area in Example 4");
              },
            ),
          ),
        ),
      ),
    );
  }
}