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

创建表单域 ​

ComPDF Flutter SDK 支持两种方式创建表单域：通过 CPDFReaderWidget 进入表单创建模式进行交互创建，或通过 CPDFDocument API 以编程方式创建表单域。

交互创建 ​

通过 CPDFReaderWidget，用户可以进入表单模式并通过触摸操作添加表单域。

dart
CPDFReaderWidgetController? _controller;

// 初始化 CPDFReaderWidget 并在 onCreated 回调中获取 controller
CPDFReaderWidget(
  document: documentPath,
  configuration: CPDFConfiguration(
    modeConfig: const CPDFModeConfig(
      initialViewMode: CPDFViewMode.forms)),
  onCreated: (controller) {

  });

await controller.setFormCreationMode(CPDFFormType.textField);

退出创建模式 ​

dart
await controller.exitFormCreationMode();

编程创建 ​

通过 CPDFDocument API 以编程方式创建表单域，以下示例展示了如何创建各种类型表单：

注意：rect 参数定义了表单域在页面上的位置和大小，坐标系的原点位于页面的左下角。

  • 创建文本域 ​

dart
final textWidget = CPDFTextWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.textField),
  page: 0,
  createDate: DateTime.fromMillisecondsSinceEpoch(1735696800000),
  rect: const CPDFRectF(left: 40, top: 799, right: 320, bottom: 701),
  borderColor: Colors.lightGreen,
  alignment: CPDFAlignment.right,
  fillColor: Colors.green,
  borderWidth: 10,
  text: 'This text field is created using the Flutter API.',
  familyName: 'Times',
  styleName: 'Bold'
);
await controller.document.addWidgets([textWidget]);

  • 创建复选框 ​

dart
final checkBoxWidget = CPDFCheckBoxWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.checkBox),
  page: 0,
  rect: const CPDFRectF(left: 361, top: 778, right: 442, bottom: 704),
  borderColor: Colors.blue,
  fillColor: Colors.white,
  borderWidth: 10,
  checkColor: Colors.blue,
  isChecked: true,
  checkStyle: CPDFCheckStyle.circle
);
await controller.document.addWidgets([checkBoxWidget]);

  • 创建单选按钮 ​

dart
final radioButtonWidget = CPDFRadioButtonWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.radioButton),
  page: 0,
  rect: const CPDFRectF(left: 479, top: 789, right: 549, bottom: 715),
  borderColor: Colors.lightGreen,
  fillColor: Colors.yellow,
  borderWidth: 2,
  checkColor: Colors.lightGreen,
  isChecked: true,
  checkStyle: CPDFCheckStyle.diamond
);
await controller.document.addWidgets([radioButtonWidget]);
  • 创建列表框
dart
final listBoxWidget = CPDFListBoxWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.listBox),
  page: 0,
  rect: const CPDFRectF(left: 53, top: 294, right: 294, bottom: 191),
  borderColor: Colors.blueAccent,
  fillColor: Colors.white,
  fontColor: Colors.black,
  fontSize: 18,
  familyName: 'Times',
  styleName: 'Bold',
  options: [
    CPDFWidgetItem(text: 'ComPDF', value: 'ComPDF'),
    CPDFWidgetItem(text: 'Flutter SDK', value: 'Flutter SDK'),
  ],
  selectItemAtIndex: 0
);
await controller.document.addWidgets([listBoxWidget]);

使用 CPDFReaderWidget 创建列表框时，默认会自动弹出选项列表弹窗，用于立即添加选项。ComPDF Flutter SDK 提供了关闭该弹窗的配置选项，示例如下:

dart
CPDFReaderWidget(
  document: widget.documentPath,
  configuration: CPDFConfiguration(
      formsConfig: const CPDFFormsConfig(
          showCreateListBoxOptionsDialog: false
      )
  )
);

您也可以通过 controller.addEventListener(CPDFEvent.formFieldsCreated, (event) {}) 监听表单创建完成事件，弹出自定义的选项列表弹窗进行编辑操作。详细请查看表单事件通知。

  • 创建组合框 ​

dart
final comboBoxWidget = CPDFComboBoxWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.comboBox),
  page: 0,
  borderWidth: 5,
  rect: const CPDFRectF(left: 354, top: 288, right: 557, bottom: 170),
  borderColor: Colors.blueAccent,
  fillColor: Colors.white,
  fontColor: Colors.black,
  fontSize: 18,
  familyName: 'Times',
  styleName: 'Bold',
  options: [
    CPDFWidgetItem(text: 'ComPDF', value: 'ComPDF'),
    CPDFWidgetItem(text: 'Flutter SDK', value: 'Flutter SDK'),
  ],
  selectItemAtIndex: 0
);
await controller.document.addWidgets([comboBoxWidget]);

使用 CPDFReaderWidget 创建组合框时，默认会自动弹出选项列表弹窗，用于立即添加选项。ComPDF Flutter SDK 提供了关闭该弹窗的配置选项，示例如下:

dart
CPDFReaderWidget(
  document: widget.documentPath,
  configuration: CPDFConfiguration(
      formsConfig: const CPDFFormsConfig(
        showCreateComboBoxOptionsDialog: false
      )
  )
);

您也可以通过 controller.addEventListener(CPDFEvent.formFieldsCreated, (event) {}) 监听表单创建完成事件，弹出自定义的选项列表弹窗进行编辑操作。详细请查看表单事件通知。

  • 创建签名域 ​

dart
final signatureWidget = CPDFSignatureWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.signaturesFields),
  page: 0,
  rect: const CPDFRectF(left: 64, top: 649, right: 319, bottom: 527),
  borderColor: Colors.black,
  fillColor: Colors.white,
  borderWidth: 5
);
await controller.document.addWidgets([signatureWidget]);

  • 创建按钮 ​

按钮可以设置不同的动作类型，如跳转网页、跳转页面等。

dart
// 跳转网页按钮
final urlButtonWidget = CPDFPushButtonWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.pushButton),
  page: 0,
  rect: const CPDFRectF(left: 366, top: 632, right: 520, bottom: 541),
  borderColor: Colors.amberAccent,
  borderWidth: 5,
  fillColor: Colors.white,
  action: CPDFUriAction(uri: 'https://www.compdf.com'),
  buttonTitle: 'To Web'
);

// 跳转页面按钮
final gotoButtonWidget = CPDFPushButtonWidget(
  title: CPDFWidgetUtil.createFieldName(CPDFFormType.pushButton),
  page: 0,
  rect: const CPDFRectF(left: 365, top: 503, right: 501, bottom: 413),
  borderColor: Colors.indigoAccent,
  borderWidth: 5,
  fillColor: Colors.white,
  action: CPDFGoToAction(pageIndex: 1),
  buttonTitle: 'Jump Page 1',
  familyName: 'Times',
  styleName: 'Bold'
);

await controller.document.addWidgets([urlButtonWidget, gotoButtonWidget]);

使用 CPDFReaderWidget 创建按钮时，默认会自动弹出选项编辑弹窗，用于立即设置按钮事件。ComPDF Flutter SDK 提供了关闭该弹窗的配置选项，示例如下:

dart
CPDFReaderWidget(
  document: widget.documentPath,
  configuration: CPDFConfiguration(
      formsConfig: const CPDFFormsConfig(
        showCreatePushButtonOptionsDialog: false
      )
  )
);

您也可以通过 controller.addEventListener(CPDFEvent.formFieldsCreated, (event) {}) 监听表单创建完成事件，弹出自定义的事件编辑弹窗进行编辑操作。详细请查看表单事件通知。

支持的表单域类型 ​

类型
textField
checkBox
radioButton
listBox
comboBox
signaturesFields
pushButton