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

自定义 PDF UI ​

本章节介绍如何通过 readerViewConfig.uiStyle 自定义 PDF 页面内部的交互 UI 样式。该配置仅作用于 PDF

内容区域本身，包括文本选中、注释与表单选中边框、截图选区、页面矩形高亮及页面内图标等视觉元素，不包含

工具栏、主题色或阅读器整体 UI 配置。

注释与内容编辑选中样式 ​

此配置用于控制注释和内容编辑对象在选中状态下的边框与控制点样式。

dart
CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      focusBorderStyle: const CPDFUiBorderStyle(
        nodeColor: Colors.pink,
        borderColor: Colors.pink,
        borderWidth: 2,
        borderDashPattern: [0,0]
      ),
    )
  )
);
字段类型说明
nodeColorString控制点（角点）颜色
borderColorString选中边框颜色
borderWidthNumber边框宽度
borderDashPatternNumber[]虚线样式，[实线长度, 间隔长度]

内容编辑默认边框样式 ​

此配置用于控制内容编辑对象在未选中状态下的边框显示样式。

dart
CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      defaultBorderStyle: const CPDFUiBorderStyle(
        borderColor: Colors.amberAccent,
        borderWidth: 2,
        borderDashPattern: [20, 8]
      )
    )
  )
);
字段类型说明
borderColorString边框颜色
borderWidthNumber边框宽度
borderDashPatternNumber[]虚线样式

表单绘制与预览样式 ​

此配置用于设置表单控件创建过程中的绘制预览效果。

dart
CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      formPreview: CPDFUiFormPreviewStyle(
        style: CPDFFormPreviewStyleType.fill,
        color: Colors.purple.withAlpha(100),
      ),
    )
  )
);
字段说明
style预览样式，支持 fill / stroke
strokeWidth边框宽度
color预览颜色（支持透明度）

截图选区样式 ​

此配置用于自定义截图功能中选区边框及遮罩区域的显示效果。

dart
CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      screenshot: const CPDFUiScreenshotStyle(
        outsideColor: Colors.transparent,
        borderColor: Colors.purple,
        borderWidth: 5,
        borderDashPattern: [10,5],
        fillColor: Colors.transparent
      )
    )
  )
);
字段说明
outsideColor选区外遮罩颜色
fillColor选区内部填充颜色
borderColor边框颜色
borderWidth边框宽度
borderDashPattern虚线样式

文本选中样式与操作角标 ​

此配置用于控制文本选中区域的背景色及两侧操作角标图标。

dart
CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      selectTextColor: Colors.deepOrange.withAlpha(100),
      icons: const CPDFUiStyleIcons(
        selectTextIcon: 'ic_test_cursor',
        selectTextLeftIcon: 'ic_test_cursor_left',
        selectTextRightIcon: 'ic_test_cursor_right',
        rotationAnnotationIcon: 'ic_test_rotate'
      )
    )
  )
);
字段说明
selectTextColor文本选中背景色
selectTextLeftIcon左侧操作角标图标
selectTextRightIcon右侧操作角标图标
selectTextIcon默认操作图标
rotationAnnotationIcon旋转注释图标

添加自定义图标资源：

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

页面矩形高亮样式 ​

此配置用于通过 controller.setDisplayPageIndex() API 高亮显示指定页面时的矩形区域样式。

dart
CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      displayPageRect: CPDFUiDisplayPageRectStyle(
        borderColor: Colors.green,
        borderWidth: 4,
        borderDashPattern: [15,5],
        fillColor: Colors.green.withAlpha(50)
      ),
    )
  )
);
字段说明
fillColor矩形区域填充颜色
borderColor矩形边框颜色
borderWidth边框宽度
borderDashPattern虚线样式

书签标记图标 ​

此配置用于自定义页面内书签标记的显示图标。

dart
CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      bookmarkIcon: 'ic_test_bookmark',
    )
  )
);

当未配置该字段时，SDK 将使用默认书签图标。