PhotoView 包在 Stack 小部件内无法正常工作

Question

当使用 PhotoView 包并使用堆栈重叠更多图像时，缩放和滚动功能在重叠区域不起作用。

我正在使用 PhotoView Dart 包来显示可缩放和可滚动的图像。 我需要重叠使用 Paint 函数创建的附加图像。我使用 Stack() 小部件来重叠图像并且它有效。 问题是，在存在重叠的区域中，使用 PhotoView 管理的图像不会对缩放和滚动操作做出反应。然而，图像在重叠区域之外可以正常工作。我怎样才能解决这个问题，使图像在任何区域都能正确反应？

这是我使用的代码：

class imageViewerState extends State<imageViewer> {
  bool showCaliper = false;

  @override
  Widget build(BuildContext context) {
    Orientation orientation = MediaQuery.of(context).orientation;

    return MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
        child: Container(
            child: Stack(alignment: Alignment.center, children: [
          /*Container(
                color: ui.cardcolor,
              ),*/

          PhotoView(
            initialScale: orientation == Orientation.portrait
                ? PhotoViewComputedScale.covered * 0.5
                : PhotoViewComputedScale.covered * 0.9,
            basePosition: Alignment.centerLeft,
            //minScale: PhotoViewComputedScale.contained,
            //maxScale: PhotoViewComputedScale.covered * 4.1,
            backgroundDecoration: BoxDecoration(
                image: DecorationImage(
              colorFilter: const ColorFilter.mode(
                Colors.white,
                BlendMode.softLight,
              ),
              image: globals
                  .backgroundImage, //AssetImage("images/app_images/Blur.png"),
              fit: BoxFit.cover,
            )),
            imageProvider: AssetImage(
              widget.imagepath,
            ),
          ),
          /*Column(
                children: [
                  SizedBox(height: 60,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(Icons.content_paste, size: 25,color: Colors.black54),
                      Text('  ' +widget.titolo, style: ui.cardtitle),

                    ],
                  ),
                ],
              ),

               */
          SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      GestureDetector(
                          onTap: () {
                            setState(() {
                              showCaliper = !showCaliper;
                            });
                          },
                          child: Visibility(
                              visible: false,
                              child: Icon(
                                CupertinoIcons.arrow_left_right_square,
                                color: Colors.black54,
                              ))),
                      GestureDetector(
                          onTap: () {
                            Navigator.pop(context);
                            ;
                          },
                          child: Icon(
                            CupertinoIcons.clear_circled_solid,
                            color: Colors.black54,
                          )),
                    ],
                  ),
                ],
              ),
            ),
          ),
          Visibility(
            visible: showCaliper,
            child: CustomPaint(
              //                       <-- CustomPaint widget
              size: Size(300, 300),
              painter: MyPainter(),
            ),
          ),
        ])
            //widget.image,
            ));
  }
}

class MyPainter extends CustomPainter {
  //         <-- CustomPainter class
  @override
  void paint(Canvas canvas, Size size) {
    final p1 = Offset(50, 50);
    final p2 = Offset(50, 250);
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 4;
    canvas.drawLine(p1, p2, paint);
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return true;
  }

Answer 1

如果堆栈中的其他小部件不需要手势，您可以将它们包装在

IgnorePointer

中。这样，他们就不会阻止用于

PhotoView

的手势。

  @override
  Widget build(BuildContext context) {
    Orientation orientation = MediaQuery.of(context).orientation;

    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
      child: Container(
         child: Stack(alignment: Alignment.center, children: [
      PhotoView(...),
      IgnorePointer(child: SafeArea(
        child: ...
      ),),
      IgnorePointer(child: Visibility(
        visible: showCaliper,
        child: CustomPaint(
          size: Size(300, 300),
          painter: MyPainter(),
        ),
      ),),
    ])
  ));
}