我想创建一个功能,显示一个快速,信息弹出,将自行消失.这部分我可以做.

问题是:我希望有经验的用户,谁了解应用程序,不需要弹出,能够继续点击屏幕,并通过应用程序移动,好像弹出不存在.

下面是我代码的简化版本:

import 'package:flutter/material.dart';

class DashboardScreen extends StatelessWidget {
  const DashboardScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // BUTTON 1
            ElevatedButton(
              onPressed: () {
                // Show popup
                Navigator.of(context).push(
                  PageRouteBuilder(
                    opaque: false,
                    pageBuilder: (context, animation, secondaryAnimation) {
                      return IgnorePointer(
                        child: Scaffold(
                          backgroundColor: Colors.transparent,
                          body: Container(
                            color: Colors.red,
                            height: 50,
                            width: 50,
                          ),
                        ),
                      );
                    },
                  ),
                );
              },
              child: const Text('Show Popup'),
            ),

            const SizedBox(height: 20),

            // BUTTON 2
            ElevatedButton(
              onPressed: () {
                print('Button 2 pressed!');
              },
              child: const Text('Print to Console'),
            ),
          ],
        ),
      ),
    );
  }
}

在本例中,左上角的一个红色小方框表示弹出窗口.我希望当屏幕上出现红色框时,用户可以继续使用Button 2打印到控制台.按照原样,当红色框可见时,该按钮不可点击.

Flutter有没有方法将点击通过一个页面传递到它后面的页面?我认为这可以通过IgnorePointer小部件实现;然而,情况似乎并非如此.

推荐答案

示例代码不起作用的原因是因为PageRouteBuilderModalRoute的所有其他子类一起安装了阻止指针事件的屏障.您可以通过创建一个覆盖buildModalBarrier的子类来更改该屏障的构建方式.因此,您希望该方法返回一个小部件,该小部件在点击时关闭模态,同时允许它后面的小部件实际处理点击.

不幸的是,Ffltter的手势系统真的不喜欢让多个手势检测器对单一输入做出react .我发现唯一有效的是设置为onPointerUpListener,以取消模式路由.使用任何其他按钮,如GestureDetector,甚至只使用Listener.onPointerDown,都会阻止模式后面的按钮运行.

以下是新路由的最终代码:

class TransparentDialogRoute extends DialogRoute {
  TransparentDialogRoute({
    required super.context,
    required super.builder,
  });

  @override
  Widget buildModalBarrier() {
    return Listener(
      behavior: HitTestBehavior.translucent,
      onPointerUp: (_) => navigator?.maybePop(),
    );
  }
}

here is a Dartpad个与该路由合并到你的示例代码.

Flutter相关问答推荐

如何更改默认应用程序启动器/启动屏幕

ListTile未正确显示在flutter中

如何更改ElevatedButton的 colored颜色 以按下它?

Flutter:InteractiveViewer中可伸缩SVG背景上的定位小部件不对齐

Flutter—如何在Riverpod中使用全类状态?

如何使用新的Riverpod语法将依赖传递给AsyncNotifier?

为什么要在值列表中两次放入空安全性

BottomNavigationBar-我应该使用Container和Align吗?

怎么才能像这样在摆动着这些曲线呢?

抖动问题:检测到0个或2个或更多具有相同值的[DropdownMenuItem]

Flutter - Stripe:类型List 不是类型Map 的子类型? method_channel_stripe.dart 中的错误:263

尽管海拔设置为 0,如何删除 appBar 下的下划线

Flutter 3.10 - 'window' 已弃用,不应使用

Flutter:如何在 bottomsheet 中创建一个日期 Select 器,如下图所示

如何将此文本按钮剪辑在堆栈中的圆形头像上方?

Flutter blue plus 库,当try 从 esp32 驱动程序获取 PlatformException 时读取特性

如何防止卡子在底部溢出?

更新未知文档 ID firebase\flutter 中的字段

如何从用户 Flutter 导航抽屉中隐藏管理菜单

Flutter:如何将 AssetImage 转换为 Unit8List?