ComPDF
联系销售
文档DemoDownloadFAQ更新日志
Guides

主工具栏 ​

ComPDF 的主工具栏设计灵活且高度可配置。本指南展示如何定义主工具栏选项以及添加完全自定义的菜单选项。

  • 配置已有的工具栏按钮项
  • 添加更多菜单选项
  • 自定义菜单选项

默认工具栏 ​

默认工具栏包含以下工具：

AndroidiOS
flutter-androidflutter-ios

自定义工具栏按钮 ​

ComPDF Flutter SDK 在显示 PDF 时使用toolbarLeftItems、toolbarRightItems属性自定义主工具栏按钮。以下示例展示了如何在 iOS 中隐藏导航栏（主工具栏）中的菜单按钮，以及如何自定义 Android 工具栏菜单项：

dart
final CPDFConfiguration configuration = CPDFConfiguration(
  toolbarConfig: CPDFToolbarConfig(
    toolbarLeftItems: Platform.isIOS
    ? const [
      CPDFToolbarAction.back,
      CPDFToolbarAction.thumbnail,
    ]
    : const [
      CPDFToolbarAction.back,
    ],
    toolbarRightItems: Platform.isIOS
    ? const [
      CPDFToolbarAction.search,
      CPDFToolbarAction.bota,
    ]
    : const [
      CPDFToolbarAction.search,
      CPDFToolbarAction.thumbnail,
      CPDFToolbarAction.bota,
      CPDFToolbarAction.menu,
    ],
  ),
);

说明 不同平台的工具栏默认交互存在差异， 示例中根据平台分别配置左右工具栏按钮。

使用 CPDFReaderWidget 打开文档

dart
Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(),
  body: CPDFReaderWidget(
    document: documentPath,
    configuration: configuration,
    onCreated: (controller) {
      // ReaderView 创建完成回调
    },
  ),
);

使用 ComPDFKit.openDocument 打开文档

dart
ComPDFKit.openDocument(documentPath, 'password',configuration);

自定义工具栏将如下所示：

AndroidiOS
flutter-androidflutter-ios

工具栏选项 ​

工具栏按钮项描述
back显示关闭按钮项。
thumbnail显示缩略图按钮项。
search显示搜索按钮项。
bota显示大纲、书签、注释列表按钮项。
menu显示菜单按钮项。
viewSettings打开设置视图并设置滚动方向、<br>显示模式、主题颜色等相关设置。
documentEditor打开文档缩略图列表，可以在视图中删除、旋转和添加文档页面。
documentInfo打开文档信息视图以显示基本文档信息和权限信息。
watermark打开水印编辑视图以添加文本和图像水印，并将其保存为新文档。
security打开安全设置视图，设置文档打开密码和权限密码。
flattened将文档中的注释扁平化，注释将不可编辑。
save保存 PDF 文档。
share打开系统共享功能。
openDocument打开系统文件选择器并打开新 PDF 文档。
custom自定义菜单选项

注意：请参考 CPDFToolbarAction 获取相关选项。

更多菜单 ​

通过在主工具栏配置CPDFToolbarAction.menu可展示更多菜单，点击后弹出弹窗可选择更多选项， 更多菜单通过使用availableMenus进行配置选项，与上述的配置方式相同。

以下是配置示例：

dart
CPDFConfiguration(
  toolbarConfig: CPDFToolbarConfig(
    availableMenus: const [
      CPDFToolbarAction.viewSettings,
      CPDFToolbarAction.documentEditor,
      CPDFToolbarAction.security,
      CPDFToolbarAction.watermark,
      CPDFToolbarAction.flattened,
      CPDFToolbarAction.documentInfo,
      CPDFToolbarAction.save,
      CPDFToolbarAction.share,
      CPDFToolbarAction.openDocument,
      CPDFToolbarAction.snip
    ]
  ));

自定义菜单 ​

在2.6.0版本以及更高的版本中，您可以通过customToolbarLeftItems,customToolbarRightItems、

customMoreMenuItems 属性添加自定义菜单选项。

提供两种自定义方式：

  • 修改已有菜单选项的图标和标题
  • 添加完全自定义的菜单选项

以下是配置示例：

dart
CPDFConfiguration(
          toolbarConfig: CPDFToolbarConfig(
        customToolbarLeftItems: [                 // 自定义左侧菜单选项
          CPDFCustomToolbarItem.action(action: CPDFToolbarAction.back),
          CPDFCustomToolbarItem.custom(
              identifier: 'custom_editor_action', // 自定义标识符,必须配置
              icon: 'ic_test_edit'),              // 自定义图标
        ],
        customToolbarRightItems: [                // 自定义右侧菜单选项
          CPDFCustomToolbarItem.action(
              icon: 'ic_test_book',               // 自定义图标
              action: CPDFToolbarAction.bota),
          CPDFCustomToolbarItem.custom(           // 自定义菜单选项
              identifier: 'custom_text_search_action',
              icon: 'ic_test_search'),
          CPDFCustomToolbarItem.action(
              icon: 'ic_test_more',
              action: CPDFToolbarAction.menu),
        ],
        customMoreMenuItems: [
          CPDFCustomToolbarItem.action(
            action: CPDFToolbarAction.viewSettings),
          CPDFCustomToolbarItem.custom(
              identifier: 'custom_share',       // 自定义标识符,必须配置
              title: 'Custom Share',            // 自定义标题,仅在更多菜单中生效
              icon: 'ic_test_share')
        ],
      ));

参数说明

参数说明
action必选参数，指定要自定义的菜单选项，参考 CPDFToolbarAction。
identifier必选参数，自定义菜单选项的唯一标识符。
icon可选参数，指定自定义菜单选项的图标，支持本地资源图片名称或文件路径。
title可选参数，指定自定义菜单选项的标题文本。仅在更多菜单中生效

添加自定义菜单点击事件

仅当使用 CPDFCustomToolbarItem.custom 自定义菜单选项时，您需要通过

onCustomToolbarItemTappedCallback 回调处理点击事件：

dart
CPDFReaderWidget(
  document: documentPath,
  configuration: configuration,
  onCreated: (controller) {
    setState(() {
      this._controller = controller;
    });
  },
  onCustomToolbarItemTappedCallback: (String identifier) {
    if (identifier == 'custom_editor_action') {
      // 处理自定义编辑菜单点击事件
    } else if (identifier == 'custom_text_search_action') {
      // 处理自定义搜索菜单点击事件
    } else if (identifier == 'custom_share') {
      // 处理自定义分享菜单点击事件
    }
  },
);

添加自定义图标

要自定义菜单图标，您需要在 Android 和 iOS 中以不同的方式实现它们。

  • Android：将图标文件（如 ic_test_search）放入 android/app/src/main/res/drawable 目录。
  • iOS：将图标文件（如 ic_test_search）添加到 ios/Runner/Assets.xcassets 资源集。