首页 > 解决方案 > 在 Flutter 中将固定点放在 PhotoView 上

问题描述

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

但我的问题是在我放大 PhotoView 时,添加在图像上的 MaterialButtons(points) 不在同一位置。我会让一张照片看看什么时候是正常的图像并放大。

我真的不知道我该怎么做,我只是希望 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,
                    );

正常图像视图

放大图像视图

标签: flutterflutter-layoutgesturedetectorflutter-positioned

解决方案


推荐阅读