Flutter手势扩展区域插件extend_gesture_area的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter手势扩展区域插件extend_gesture_area的使用

这个插件允许你在不改变小部件尺寸的情况下处理超出小部件范围的手势（给定填充）。

使用方法

步骤 1

将手势小部件包装在 ExtendGestureAreaConsumer 中，并设置 gesturePadding。

import 'package:extend_gesture_area/extend_gesture_area.dart';
  
ExtendGestureAreaConsumer(
    gesturePadding: 30,
    child: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
    ),
),

步骤 2

将父级包装在 ExtendGestureAreaDetector 中。 注意：父级应包含手势小部件及其周围区域（gesturePadding）。

import 'package:extend_gesture_area/extend_gesture_area.dart';

[@override](/user/override)
Widget build(BuildContext context) {
    // 包装 Scaffold，因为此小部件是 FloatingActionButton 的父级，并且拥有其周围的区域
    return ExtendGestureAreaDetector(
        child: Scaffold(
            appBar: AppBar(
                title: Text(widget.title),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        const Text(
                            'You have pushed the button this many times:',
                        ),
                        Text(
                            '$_counter',
                            style: Theme.of(context).textTheme.headlineMedium,
                        ),
                    ],
                ),
            ),
            floatingActionButton: ExtendGestureAreaConsumer(
                gesturePadding: 30,  // 设置手势填充
                child: FloatingActionButton(
                    onPressed: _incrementCounter,
                    tooltip: 'Increment',
                    child: const Icon(Icons.add),
                ),
            ),
        ),
    );
}

完整示例

下面是一个完整的示例，展示了如何使用 extend_gesture_area 插件来扩展手势识别区域。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ExtendGestureAreaDetector(
        child: Scaffold(
            appBar: AppBar(
              title: Text('手势扩展区域示例'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Text(
                        '你已经点击了按钮多少次:',
                      ),
                      Text(
                        '$_counter',
                        style: Theme.of(context).textTheme.headlineMedium,
                      ),
                    ],
                ),
            ),
            floatingActionButton: ExtendGestureAreaConsumer(
                gesturePadding: 30,  // 设置手势填充
                child: FloatingActionButton(
                    onPressed: _incrementCounter,
                    tooltip: '增加',
                    child: const Icon(Icons.add),
                ),
            ),
        ),
    );
  }
}

更多关于Flutter手势扩展区域插件extend_gesture_area的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter手势扩展区域插件extend_gesture_area的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用extend_gesture_area插件的一个代码示例。extend_gesture_area插件允许你扩展手势识别的区域，这在处理复杂布局时特别有用，尤其是当你希望某个手势能够从一个子组件扩展到其父组件或相邻组件时。

首先，确保你已经在pubspec.yaml文件中添加了extend_gesture_area依赖：

dependencies:
  flutter:
    sdk: flutter
  extend_gesture_area: ^x.y.z  # 替换为最新版本号

然后，运行flutter pub get来安装依赖。

下面是一个使用extend_gesture_area的简单示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Extend Gesture Area Example'),
        ),
        body: Center(
          child: ExtendGestureArea(
            // 扩展手势识别的区域
            extendTo: EdgeInsets.all(20.0),
            child: GestureDetector(
              onTap: () {
                print('Tapped inside the extended area!');
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Tap Me',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. ExtendGestureArea被用来扩展手势识别的区域。extendTo参数定义了手势识别区域扩展的范围，这里我们设置了所有边缘扩展20个逻辑像素。
  2. GestureDetector用于检测手势。在这个例子中，我们监听了一个简单的点击事件。
  3. Container作为GestureDetector的子组件，提供了一个可视化的点击区域。虽然它的实际大小是100x100，但由于ExtendGestureArea的作用，点击区域将向外扩展20个像素。

当你运行这个应用并点击Container周围的扩展区域时，控制台将输出Tapped inside the extended area!，表明手势已经被识别。

这个示例展示了如何使用extend_gesture_area插件来扩展手势识别的区域，这在处理复杂UI交互时非常有用。

回到顶部