如何在我的 Flutter 应用程序中显示可关闭的教程叠加层？

2024-06-02 • 问答

我想在我的 Flutter 应用程序的屏幕上显示教程叠加层。我什至找到了一个很好的候选人，它几乎可以满足我的要求：那就是 https://pub.dev/packages/overlay_tutorial/ 插件。用户按下屏幕上的帮助按钮，覆盖层就会弹出，并带有剪切图。虽然我不希望任何东西收到点击 (https://github.com/TabooSun/overlay_tutorial/issues/26)，但是如果用户点击屏幕上的任何地方，叠加层就会消失。

我尝试使用 AbsorbPointer 并且它成功拦截了点击，并且不再有点击和叠加层下方发生的事情。查看我的叉子：https://github.com/CsabaConsulting/overlay_tutorial/commit/9d809d51bcf55b9c8044d07d151c696bdb55abe6 但是现在也无法点击覆盖层。

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        AbsorbPointer(
          absorbing: widget.enabled && widget.absorbPointer,ignoringSemantics: true,child: _OverlayTutorialBackbone(
            overlayColor: widget.overlayColor,enabled: widget.enabled,overlayTutorialHoles: _overlayTutorialHoles,onEntryRectCalculated: () {
              _updateChildren();
            },child: widget.child,),if (widget.enabled) ...[
          ..._overlayTutorialHoles.entries
              .map((entry) {

我需要的是 AbsorbPointer 的 onTap 或 onClick 处理程序。我可以将东西包装到 GestureDetector 中，但这会一直拦截点击和手势。这里有什么好的解决方案？

*这个答案来自我的评论

如果将此代码粘贴到 DartPad 中，您可以看到当小部件树中的 GestureDetector 位于另一个上方时，只有较低的 onTap 被执行。但是，如果较低的 GestureDetector 用 AbsorbPointer 包裹在 absorbing: true 中，那么父 GestureDetector 才会被调用。因此，您应该能够遵循我在评论中的建议。即使这不是真的，您仍然可以有条件地将您的父母 onTap 的 GestureDetector 设置为 null。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255,18,32,47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),debugShowCheckedModeBanner: false,home: Scaffold(
        body: Center(
          child: MyWidget(),),);
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool absorbing = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            print('GestureDetector 1');
          },child: AbsorbPointer(
            absorbing: absorbing,child: GestureDetector(
              onTap: () {
                print('GestureDetector 2');
              },child: Container(
                height: 200.0,width: 200.0,color: Colors.red,alignment: Alignment.center,child: Text(
                  'Press me and check console',style: TextStyle(
                    color: Colors.white,GestureDetector(
          onTap: () {
            setState(() {
              absorbing = !absorbing;
            });
          },child: Container(
            height: 200.0,color: Colors.blue,child: Text(
              'Change absorb\n(absorbing: $absorbing)',textAlign: TextAlign.center,style: TextStyle(
                color: Colors.white,],);
  }
}

如何在我的 Flutter 应用程序中显示可关闭的教程叠加层？

riijlcvyp 回答：如何在我的 Flutter 应用程序中显示可关闭的教程叠加层？

大家都在问