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

相关推荐
葱头的故事1 小时前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节
Mintopia1 小时前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈
Mintopia2 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia2 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
木易 士心2 小时前
CSS 样式用法大全
前端·css·1024程序员节
012925202 小时前
1.1 笔记 html 基础 初认识
前端·笔记·html
2501_929382652 小时前
[Switch大气层]纯净版+特斯拉版 20.5.0大气层1.9.5心悦整合包 固件 工具 插件 前端等资源合集
前端·游戏·switch·1024程序员节·单机游戏
非凡ghost2 小时前
Tenorshare 4DDiG(数据恢复软件) 最新版
前端·javascript·后端
非凡ghost2 小时前
WinMute(自动锁屏静音软件) 中文绿色版
前端·javascript·后端
7ayl3 小时前
Vue3 - Reactivity的核心流程
前端·vue.js