Flutter中使用Syncfusion_pdf_viewer如何实现PDF居中显示

问题描述 #

使用Syncfusion_pdf_viewer包加载展示本地PDF文件时，PDF页面渲染效果不符合预期：页面整体偏向右侧，无法居中显示，调整插件多项配置参数后问题仍未解决。
原有问题代码如下：

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Syncfusion Flutter PdfViewer'),
          actions: <Widget>[],
        ),
        body: SfPdfViewer.asset(
          'data/hymn_pdf/full-songs.pdf',
          initialZoomLevel: 1.5,
          initialScrollOffset: Offset.fromDirection(10),
          controller: _pdfViewerController,
          pageSpacing: 10,
          canShowScrollHead: false,
          onDocumentLoaded: (details) {
            _pdfViewerController.jumpToPage(widget.number); // 跳转至指定页码
          },
        ));
  }

问题表现截图：
PDF页面偏右效果展示

问题原因 #

代码中配置的initialScrollOffset: Offset.fromDirection(10)是导致页面偏移的核心原因：
Offset.fromDirection方法会根据传入的弧度参数同时生成水平、垂直两个方向的滚动偏移量，传入10弧度时会产生不为0的水平方向偏移，直接导致PDF页面初始加载就向右偏移；后续调用jumpToPage方法仅会切换页码、定位纵向滚动位置，不会自动重置横向滚动位置，因此偏移问题会持续存在。

修复方案 #

1. 移除错误的initialScrollOffset配置，或显式将其设置为Offset.zero，保证初始加载时无额外横向滚动偏移。SfPdfViewer在无自定义横向偏移的默认状态下，会自动将PDF页面适配到容器居中位置。
2. 修复后完整代码如下：

Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter PdfViewer'),
        actions: const <Widget>[],
      ),
      body: SfPdfViewer.asset(
        'data/hymn_pdf/full-songs.pdf',
        initialZoomLevel: 1.5,
        // 重置初始滚动偏移为0
        initialScrollOffset: Offset.zero,
        controller: _pdfViewerController,
        pageSpacing: 10,
        canShowScrollHead: false,
        onDocumentLoaded: (details) {
          _pdfViewerController.jumpToPage(widget.number);
        },
      ));
}

额外排查点 #

如果按上述修改后仍存在偏移问题，逐一检查以下配置：

• 检查SfPdfViewer的外层父容器是否设置了不对称的内边距、外边距，不对称的布局约束会挤压PDF渲染空间导致偏移
• 若后续需要自定义初始滚动偏移，仅设置纵向偏移值即可，不要随意配置水平方向偏移，避免破坏组件默认的居中适配逻辑

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