Flutter手势排除区域插件android_gesture_exclusion的使用

插件简介

android_gesture_exclusion插件包装了Android的View#getSystemGestureExclusionRects() API，以避免在支持Android 10（API级别29）及更高版本的手势导航和现有UI从屏幕左右边缘滑动手势之间的冲突。此插件仅适用于Android。

使用方法

使用实例

示例代码

首先，为要获取其矩形的Widget设置一个GlobalKey:

final GlobalKey globalKey = GlobalKey();

@override
Widget build(BuildContext context) {
  return SampleWidget(
    key: globalKey,
  );
}

然后，通过GlobalKey获取该Widget的矩形，并设置想要排除手势导航的矩形区域：

final context = sliderKey.currentContext;
if (context == null) {
  debugPrint("Slider is not in hierarchy yet");
  return;
}

final box = context.findRenderObject() as RenderBox;
final position = box.localToGlobal(Offset.zero);

final ratio = MediaQuery.of(context).devicePixelRatio;
final left = position.dx * ratio;
final top = position.dy * ratio;
final right = left + box.size.width * ratio;
final bottom = top + box.size.height * ratio;
final rect = Rect.fromLTRB(left, top, right, bottom);

// 创建实例并设置想要排除手势导航的矩形区域
final androidGestureExclusion = AndroidGestureExclusion.instance;
androidGestureExclusion.setRects([rect]);

使用组件

你也可以简单地将需要排除手势导航的区域包裹在一个AndroidGestureExclusionContainer组件中，并且可以设置水平和垂直方向上的边距：

@override
Widget build(BuildContext context) {
  // 包裹需要排除手势导航的组件
  return AndroidGestureExclusionContainer(
    verticalExclusionMargin: 20,
    child: SampleWidget(),
  );
}

完整示例Demo

下面是一个完整的示例应用，展示了如何在Flutter应用中使用android_gesture_exclusion插件来处理手势冲突问题：

import 'dart:async';

import 'package:android_gesture_exclusion/android_gesture_exclusion.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  final GlobalKey sliderKey = GlobalKey();
  double _position = 1.0;
  double _position2 = 1.0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => initPlatformState());
  }

  Future<void> initPlatformState() async {
    final androidGestureExclusion = AndroidGestureExclusion.instance;
    if (!mounted) return;

    final context = sliderKey.currentContext;

    if (context == null) {
      debugPrint("Slider is not in hierarchy yet");
      return;
    }

    final box = context.findRenderObject() as RenderBox;
    final position = box.localToGlobal(Offset.zero);

    final ratio = MediaQuery.of(context).devicePixelRatio;
    final verticalThreshold = 10 * ratio;

    final left = position.dx * ratio;
    final top = position.dy * ratio;
    final right = left + box.size.width * ratio;
    final bottom = top + box.size.height * ratio;
    final rect = Rect.fromLTRB(
        left, top - verticalThreshold, right, bottom + verticalThreshold);

    try {
      androidGestureExclusion.setRects([rect]);
    } on PlatformException {
      debugPrint('AndroidGestureExclusion Platform Exception');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('android_gesture_exclusion example'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(_position.toString()),
              Slider(
                key: sliderKey,
                value: _position,
                onChanged: (newPosition) {
                  setState(() {
                    _position = newPosition;
                  });
                },
              ),
              Text(_position2.toString()),
              AndroidGestureExclusionContainer(
                verticalExclusionMargin: 20,
                child: Slider(
                  value: _position2,
                  onChanged: (newPosition) {
                    setState(() {
                      _position2 = newPosition;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

问题反馈

如果您遇到任何问题、错误或有功能请求，请在我们的GitHub页面上提交issue。