Flutter PDF包Checkbox显示异常问题求助

可能的原因及对应解决方案 #

1. pdf包版本兼容性与缓存问题 #

• 旧版本pdf包的pw.Checkbox组件存在缺陷，无法正确渲染勾选标记；新版本可能对组件API做了破坏性变更，导致升级后组件无法显示。
• 回退版本后仍异常，大概率是pub缓存未清理，实际依赖的还是新版本包文件。

解决办法：

• 清理pub缓存并重新拉取依赖：

  flutter pub cache clean
  flutter pub get
  

• 在pubspec.yaml中锁定稳定版本的pdf包，比如：

  pdf: ^3.10.0
  

2. 自定义PDF主题覆盖Checkbox默认样式 #

你代码中设置的全局PDF主题：

theme: pw.ThemeData(defaultTextStyle: pw.TextStyle(font: ttf)),

可能覆盖了Checkbox的边框、勾选标记颜色等属性，导致组件因颜色与背景一致而不可见。

解决办法：

• 给Checkbox显式指定样式属性：

  pw.Checkbox(
    name: 'condition',
    value: isCondition,
    checkColor: PdfColors.black, // 勾选标记颜色
    borderColor: PdfColors.black, // 边框颜色
    height: 18,
    width: 18,
  ),
  

• 或者在主题中单独配置Checkbox样式：

  theme: pw.ThemeData(
    defaultTextStyle: pw.TextStyle(font: ttf),
    checkboxTheme: pw.CheckboxThemeData(
      checkColor: PdfColors.black,
      borderColor: PdfColors.black,
    ),
  ),
  

3. Checkbox API使用错误 #

你代码中部分Checkbox设置了tristate: true但value为明确的true，这种不必要的三态设置可能干扰渲染逻辑；另外未显式设置尺寸时，组件可能因过小而“消失”。

解决办法：

• 仅在需要三态（null/true/false）时开启tristate，否则保持默认false。
• 所有Checkbox显式设置height和width，确保显示尺寸足够：

  pw.Checkbox(
    name: 'aboveDefectsCorrected',
    value: true,
    height: 18,
    width: 18,
    borderColor: PdfColors.black,
  ),
  

4. 替代方案：手动绘制Checkbox #

如果组件本身问题无法解决，可手动用基础组件组合实现Checkbox，完全控制渲染效果：

// 自定义勾选框组件
pw.Widget customCheckbox(bool value) {
  return pw.Container(
    width: 18,
    height: 18,
    decoration: pw.BoxDecoration(
      border: pw.Border.all(color: PdfColors.black),
      color: value ? PdfColors.grey[300] : PdfColors.white,
    ),
    child: value
        ? pw.Center(
            child: pw.Text('✓', style: pw.TextStyle(fontSize: 14, color: PdfColors.black)),
          )
        : null,
  );
}

// 使用示例
pw.Row(children: [
  customCheckbox(isCondition),
  pw.SizedBox(width: 0.8 * PdfPageFormat.cm),
  pw.Text('Condition of the above vehicle is satisfactory'),
]),

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