有没有办法在 Flutter 中点击叠加层

Question

如何使用overlay_popup点击颤动叠加层？

我在我的 flutter 应用程序中实现了一个圆圈作为叠加层，并且我尝试了几种方法来点击叠加的圆圈，但当我点击叠加的圆圈时，我无法点击圆圈。当我想点击圆圈来查看圆圈下方的应用程序和其他内容时，我需要我的屏幕在点击时像在叠加层上一样工作。

我期待代码修正或代码片段可以解决我的问题。

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isActive = false;

  @override
  void initState() {
    super.initState();
    overlayStatus();
  }

  Future<void> overlayStatus() async {
    isActive = await OverlayPopUp.isActive();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter overlay pop up'),
          backgroundColor: Colors.red[900],
        ),
        body: Center(
          child: MaterialButton(
            onPressed: () async {
              final permission = await OverlayPopUp.checkPermission();
              if (permission) {
                if (!await OverlayPopUp.isActive()) {
                  isActive = await OverlayPopUp.showOverlay(
                    width: 300,
                    height: 300,
                    closeWhenTapBackButton: false,
                    isDraggable: true,
                  );
                  setState(() {});
                } else {
                  final result = await OverlayPopUp.closeOverlay();
                  setState(() {
                    isActive = (result == true) ? false : true;
                  });
                }
              } else {
                await OverlayPopUp.requestPermission();
                setState(() {});
              }
            },
            color: Colors.red[900],
            child: Text(
              isActive ? 'Close overlay' : 'Show overlay',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

@pragma("vm:entry-point")
void overlayPopUp() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: OverlayWidget(),
    ),
  );
}

class OverlayWidget extends StatelessWidget {
  const OverlayWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent, // Set the color to transparent
      child: GestureDetector(
        behavior: HitTestBehavior.translucent, // Allow taps to pass through
        onTap: () {}, // Allow tap through
        child: Stack(
          children: [
            Positioned.fill(
              child: Draggable(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.red.withOpacity(0.3), // Red color with less opacity
                        border: Border.all(color: Colors.red, width: 2.0), // Bold outline
                        shape: BoxShape.circle,
                      ),
                    ),
                    Center(
                      child: Text(
                        '•', // Dot character
                        style: TextStyle(
                          fontSize: 40, // Adjust the size of the dot as needed
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ],
                ),
                feedback: Material(
                  color: Colors.transparent,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.red.withOpacity(0.3), // Red color with less opacity
                      border: Border.all(color: Colors.red, width: 2.0), // Bold outline
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
                onDraggableCanceled: (_, __) {}, // Allow dragging
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您似乎可以在

backgroundBehavior

调用中将

OverlayFlag.tapThrough

设置为

OverlayPopup.showOverlay

，因此根据您的代码：

isActive = await OverlayPopUp.showOverlay(
   width: 300,
   height: 300,
   closeWhenTapBackButton: false,
   isDraggable: true,
   backgroundBehavior: OverlayFlag.tapThrough, // add this line
);