Flutter中PhotoView双击缩放时如何让点击区域居中显示？

要实现双击图片任意区域后，该区域放大并居中显示，只需给PhotoView添加doubleTapZoomStartPositionHandler参数，自定义双击时的缩放起始位置逻辑：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const TapTest(),
    );
  }
}

class TapTest extends StatefulWidget {
  const TapTest({super.key});
  @override
  State<TapTest> createState() => _TapTestState();
}

class _TapTestState extends State<TapTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Tap event"),
      ),
      body: Center(
        child: PhotoView(
          imageProvider: const NetworkImage("https://onl.sc/1JPXTmB"),
          maxScale: PhotoViewComputedScale.covered * 2,
          minScale: PhotoViewComputedScale.contained,
          // 自定义双击缩放的起始位置
          doubleTapZoomStartPositionHandler: (context, details, controller) {
            // 将全局点击坐标转换为PhotoView内部的本地坐标
            final localPosition = controller!.transformer.globalPositionToLocal(details.globalPosition);
            return localPosition;
          },
        ),
      ),
    );
  }
}

关键说明 #

• doubleTapZoomStartPositionHandler是PhotoView提供的回调，用于指定双击缩放的中心位置
• 通过controller.transformer.globalPositionToLocal方法，把屏幕全局坐标转换为PhotoView内部的图片相对坐标，以此作为缩放中心
• 配置后，双击图片任意区域时，该区域会成为缩放中心，缩放完成后自动居中显示在屏幕上

内容的提问来源于stack exchange，提问作者Shun Sato