在Flutter中将固定点放在PhotoView上

Question

在告诉你我的问题之前，我想告诉你我的应用程序在做什么。我有一个 PhotoView 小部件库，它允许我放大/缩小图像。我有一个 GestureDetector 小部件，它可以检测到长按时它会获取 LocalPosition (dy, dx) 并在我的 PhotoView 小部件上显示 MaterialButton(point)。到目前为止一切都很好

但我的问题是，当我放大 PhotoView 时，添加在图像上的 MaterialButtons（点）不在同一位置。我会放一张照片来看看什么时候是正常图像并放大了。

我真的不知道我应该做什么，我只想让 MaterialButton 在普通视图和缩放视图中也保持在同一位置。

我为 MaterialButton 添加位置并显示每个点的代码

  return Container(
                      child: Stack(
                        children: <Widget>[
                          GestureDetector(
                            onLongPressStart: (LongPressStartDetails details) {
                              var positionX = details.localPosition.dx - 40;
                              var positionY = details.localPosition.dy;
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => AddTaskScreen(
                                          positionX: positionX.toString(),
                                          positionY: positionY.toString(),
                                          project: widget.project,
                                          pdfDocument: widget.pdfDocument,
                                          user: widget.user)));
                            },
                            child: PhotoView(
                              imageProvider: NetworkImage(data),
                            ),
                          ),
                          for (int i = 0; i < state.taskList.length; i++)
                            Positioned(
                              top: double.parse(state.taskList[i].positionY),
                              left: double.parse(state.taskList[i].positionX),
                              child: MaterialButton(
                                onPressed: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) =>
                                              TaskDetailScreen(
                                                task: state.taskList[i],
                                                user: widget.user,
                                                projectId: widget.project.id,
                                              )));
                                },
                                color: state.taskList[i].status == in_progress
                                    ? Colors.redAccent
                                    : Colors.green,
                                shape: CircleBorder(),
                              ),
                            )
                        ],
                      ),
                      alignment: Alignment.center,
                    );

Answer 1

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  List<Area> areas = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InteractiveViewer(
        boundaryMargin: EdgeInsets.zero,
        minScale: 1,
        maxScale: 4,

        child: Container(
          alignment: Alignment.center,
          child: Stack(
            children: <Widget>[
              GestureDetector(
                onLongPressStart: (LongPressStartDetails details) {
                  setState(() {
                    var positionX = details.localPosition.dx - 40;
                    var positionY = details.localPosition.dy - 15;
                    areas.add(Area(positionX, positionY));
                  });
                },
                child: Image.asset(
                  "assets/images/factory.jpg",
                  // height: 20,
                ),
              ),
              for (int i = 0; i < areas.length; i++)
                Positioned(
                  top: areas[i].positionY,
                  left: areas[i].positionX,
                  child: MaterialButton(
                    onPressed: () {

                    },
                    color: Colors.green,
                    shape: const CircleBorder(),
                  ),
                )
            ],
          ),
        ),
      ),
    );
  }
}

class Area {
  Area(this.positionX, this.positionY);

  double positionX;
  double positionY;
}