Flutter组件封装:页面点击事件拦截

一、需求来源

用户在(游客模式)浏览某个界面(需要某种权限)时,以登录权限举例。

此时未登录状态下:正确跳转对应的页面,完成相应逻辑。我们需要用户在点击页面任意位置时,统一唤起登录页面。

未登录状态下:正确跳转对应的页面,完成相应逻辑。

开始想通过监听实现,但是无法实现,经过苦苦思索,突然某一天就灵光一闪解决了,封装了一个小组件 TapGestureIntercept。

当 TapGestureIntercept 组件的 ignoring 为 true 时,其包裹范围内的所有点击事件不响应,它 的 onTap 会代替所有子组件的响应事件;ignoring 为 false 时,子组件点击事件正常,它 的 onTap 不会调用。

二、使用示例

less 复制代码
class ClickNotificationDemo extends StatelessWidget {
  const ClickNotificationDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("页面点击拦截")),
      body: TapGestureIntercept(
        ignoring: true,
        onTap: () {
          DLog.d('页面点击事件');
        },
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          // decoration: BoxDecoration(color: Colors.green),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              ElevatedButton(
                onPressed: () {
                  debugPrint("按钮1");
                },
                child: Text("按钮1"),
              ),
              ElevatedButton(
                onPressed: () {
                  debugPrint("按钮2");
                },
                child: Text("按钮2"),
              ),
              GestureDetector(
                onTap: () {
                  debugPrint("点击黄色区域");
                },
                child: Container(
                  color: Colors.yellow,
                  padding: EdgeInsets.all(20),
                  child: Text("点击黄色区域"),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

三、源码

scala 复制代码
//
//  TapGestureIntercept.dart
//  flutter_templet_project
//
//  Created by shang on 2025/9/12 21:36.
//  Copyright © 2025/9/12 shang. All rights reserved.
//

import 'package:flutter/widgets.dart';

/// 拦截被包裹部分的事件响应
class TapGestureIntercept extends StatelessWidget {
  const TapGestureIntercept({
    super.key,
    this.behavior = HitTestBehavior.opaque,
    this.ignoring = true,
    required this.onTap,
    required this.child,
  });

  final HitTestBehavior? behavior;

  /// Defaults to true.
  final bool ignoring;

  final VoidCallback onTap;

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: behavior,
      onTap: ignoring ? onTap : null,
      child: IgnorePointer(
        ignoring: ignoring,
        child: child,
      ),
    );
  }
}

最后、总结

本诉那会死一个实战小技巧,没有这个组件,遇到类登录权限类页面就很难受,难道要我在页面20+的点击方法里做同样的拦截(判断是否已登录)?

github

相关推荐
wyzqhhhh21 小时前
less和sass
前端·less·sass
Nan_Shu_6141 天前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel1 天前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始1 天前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible1 天前
带有渐变光晕
前端·javascript·css
jojo是只猫1 天前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评1 天前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner1 天前
【html】canvas实现一个时钟
前端·html
林烈涛1 天前
js判断变量是数组还是对象
开发语言·前端·javascript
Komorebi_99991 天前
Unocss
开发语言·前端