如何在Flutter中实现不同屏幕方向下点击屏幕获取一致的(x,y)坐标？

我完全懂你的困扰——不管屏幕旋转还是页面滚动，都需要拿到对应PDF文档上固定位置的坐标，这样才能精准匹配数据库里的关联信息。核心解决思路是把屏幕点击的坐标转换为PDF文档本身的相对坐标，彻底摆脱屏幕视图或滚动状态的干扰。

核心逻辑拆解 #

1. 先拿到PDF页面的原始固定尺寸（比如A4文档的210×297mm对应的像素尺寸）
2. 获取PDF在屏幕上渲染后的实际Widget尺寸
3. 计算点击位置相对于PDF渲染Widget的真实本地坐标（排除滚动偏移的干扰）
4. 按比例将本地坐标映射到PDF文档的原始坐标，横竖屏时只需调整坐标的映射逻辑即可

具体实现代码&修改说明 #

我基于你的示例代码做了针对性调整，加入了PDF尺寸获取、滚动偏移修正和坐标比例转换的核心逻辑：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final PdfController _pdfController = PdfController(
    document: PdfDocument.openAsset('assets/sample.pdf'), // 替换成你的PDF资源路径
  );
  final ScrollController _scrollController = ScrollController();
  PdfPage? _currentPage;
  Size? _pdfPageRawSize; // PDF页面的原始固定尺寸
  Size? _pdfRenderedSize; // PDF在屏幕上渲染后的实际尺寸

  @override
  void initState() {
    super.initState();
    // 监听PDF页面加载，获取原始尺寸
    _pdfController.addListener(() async {
      if (_pdfController.pages.isNotEmpty && _currentPage == null) {
        _currentPage = await _pdfController.getPage(1);
        _pdfPageRawSize = Size(
          _currentPage!.size.width,
          _currentPage!.size.height,
        );
        setState(() {});
      }
    });
  }

  @override
  void dispose() {
    _pdfController.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  void onTapDown(BuildContext context, TapDownDetails details) {
    if (_pdfPageRawSize == null || _pdfRenderedSize == null) return;

    // 1. 获取PDF渲染Widget的RenderBox
    final pdfRenderBox = context.findRenderObject() as RenderBox;
    // 2. 将全局坐标转换为PDF Widget的本地坐标
    Offset localOffset = pdfRenderBox.globalToLocal(details.globalPosition);
    // 3. 修正滚动偏移：减去ListView的滚动距离，得到相对于PDF顶部的真实位置
    localOffset = Offset(
      localOffset.dx,
      localOffset.dy - _scrollController.offset,
    );

    // 4. 根据横竖屏调整坐标映射逻辑
    final orientation = MediaQuery.of(context).orientation;
    double docX, docY;

    if (orientation == Orientation.portrait) {
      // 竖屏：按渲染尺寸与原始尺寸的比例转换
      docX = (localOffset.dx / _pdfRenderedSize!.width) * _pdfPageRawSize!.width;
      docY = (localOffset.dy / _pdfRenderedSize!.height) * _pdfPageRawSize!.height;
    } else {
      // 横屏：交换x/y的比例映射（适配屏幕旋转后的PDF渲染方向）
      docX = (localOffset.dy / _pdfRenderedSize!.height) * _pdfPageRawSize!.width;
      docY = (localOffset.dx / _pdfRenderedSize!.width) * _pdfPageRawSize!.height;
    }

    // 现在docX和docY就是PDF文档上的固定坐标，不受横竖屏和滚动影响
    print('PDF文档固定坐标: X=$docX, Y=$docY');
    // 这里就可以用这两个值去数据库查询对应信息了
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PDF一致坐标获取')),
      body: ListView(
        controller: _scrollController,
        children: [
          GestureDetector(
            onTapDown: (details) => onTapDown(context, details),
            child: PdfView(
              controller: _pdfController,
              onDocumentLoaded: (document) {
                print('PDF加载完成，总页数: ${document.pagesCount}');
              },
              onPageRendered: (page) {
                // 获取PDF渲染后的实际尺寸
                setState(() {
                  _pdfRenderedSize = Size(page.width, page.height);
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

关键细节解释 #

• 滚动偏移修正：通过_scrollController.offset获取ListView的滚动距离，从本地坐标中减去，确保得到的是相对于PDF顶部的真实点击位置。
• 横竖屏适配：根据屏幕方向交换x和y的比例映射，因为横屏时PDF的渲染方向会旋转，需要把屏幕的x/y对应到文档的y/x。
• 比例转换逻辑：始终用渲染尺寸和PDF原始尺寸的比例计算，不管PDF被缩放还是适配屏幕，最终得到的都是文档本身的固定坐标。

额外提示 #

• 确保你的PDF文档尺寸是固定的（比如标准A4），这样比例计算会更精准。
• 如果需要支持多页PDF，记得跟踪当前显示的页码，把页码也加入数据库查询的条件中。

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