Flutter触摸拦截插件touch_interceptor的使用

touch_interceptor 是一个用于拦截触摸事件并将其传递给底层小部件的Flutter插件。这个插件在某些场景下非常有用，例如当有一个不透明层覆盖在另一个小部件上时，你希望让它对触摸事件透明；或者当你想无缝地将触摸事件从一个小部件转移到另一个小部件时。

使用场景

• 当有一个不透明层覆盖在一个小部件上，并且你希望它对触摸事件透明。
• 你想无缝地将触摸事件从一个小部件转移到另一个小部件。

语法

// interceptor
TouchInterceptor(
  // other component(s)
  child: OtherWidget(
    // consumer
    child: TouchConsumer(
      onTouchDown: () {
        // do something
      },
      onTouchUp: () {
        // do something
      },
      onTouchEnter: () {
        // do something
      },
      onTouchExit: () {
        // do something
      },
    ),
  ),
),

示例代码

以下是一个完整的示例，展示了如何使用 touch_interceptor 插件：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const ExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: DemoView(),
    );
  }
}

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

  @override
  _DemoViewState createState() => _DemoViewState();
}

class _DemoViewState extends State<DemoView> {
  static const _tiColor = Colors.white;
  Color _tcColor = Colors.white;

  var _lastEvent = 'none';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          children: <Widget>[
            Expanded(
              child: Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      'TouchInterceptor',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    TouchInterceptor(
                      child: DecoratedBox(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(16),
                          border: Border.all(
                            color: _tiColor,
                            width: 4.0,
                          ),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(90.0),
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'TouchConsumer',
                                style: TextStyle(
                                  color: _tcColor,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              TouchConsumer(
                                onTouchDown: () => setState(() {
                                  _tcColor = Colors.blue;
                                  _lastEvent = 'down';
                                }),
                                onTouchUp: () => setState(() {
                                  _tcColor = Colors.orange;
                                  _lastEvent = 'up';
                                }),
                                onTouchEnter: () => setState(() {
                                  _tcColor = Colors.green;
                                  _lastEvent = 'enter';
                                }),
                                onTouchExit: () => setState(() {
                                  _tcColor = Colors.red;
                                  _lastEvent = 'exit';
                                }),
                                child: DecoratedBox(
                                  decoration: BoxDecoration(
                                    color: _tcColor,
                                    borderRadius: BorderRadius.circular(16),
                                  ),
                                  child: const SizedBox.square(dimension: 140),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 8),
            Text.rich(
              TextSpan(
                text: 'Tap or click inside the box to change color!\n',
                children: [
                  const TextSpan(text: 'Last event: '),
                  TextSpan(
                    text: _lastEvent,
                    style: TextStyle(color: _tcColor),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 8),
          ],
        ),
      ),
    );
  }
}

运行效果

在这个示例中，我们创建了一个 TouchInterceptor 小部件，它包含一个 TouchConsumer 子小部件。当用户与 TouchConsumer 交互时（如按下、松开、进入或离开），颜色会发生变化，并显示最后发生的事件类型。

你可以通过访问 GitHub上的基本示例 来查看更多示例和用法。

通过这些示例和说明，你应该能够开始使用 touch_interceptor 插件来处理复杂的触摸事件拦截和转发需求。